refactor web file structure and seperate settings from status

interface/src/app/main/CustomEntities.tsx

@@ -0,0 +1,354 @@
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+import { useBlocker } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import AddIcon from '@mui/icons-material/Add';
+import CancelIcon from '@mui/icons-material/Cancel';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Box, Button, Typography } from '@mui/material';
+
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { updateState, useRequest } from 'alova';
+import {
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import * as EMSESP from './api';
+import SettingsCustomEntitiesDialog from './CustomEntitiesDialog';
+import { DeviceValueTypeNames, DeviceValueUOM_s } from './types';
+import type { Entities, EntityItem } from './types';
+import { entityItemValidation } from './validators';
+
+const CustomEntities: FC = () => {
+  const { LL } = useI18nContext();
+  const [numChanges, setNumChanges] = useState<number>(0);
+  const blocker = useBlocker(numChanges !== 0);
+  const [selectedEntityItem, setSelectedEntityItem] = useState<EntityItem>();
+  const [creating, setCreating] = useState<boolean>(false);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  useLayoutTitle(LL.CUSTOM_ENTITIES(0));
+
+  const {
+    data: entities,
+    send: fetchEntities,
+    error
+  } = useRequest(EMSESP.readCustomEntities, {
+    initialData: [],
+    force: true
+  });
+
+  const { send: writeEntities } = useRequest(
+    (data: Entities) => EMSESP.writeCustomEntities(data),
+    { immediate: false }
+  );
+
+  function hasEntityChanged(ei: EntityItem) {
+    return (
+      ei.id !== ei.o_id ||
+      ei.ram !== ei.o_ram ||
+      (ei?.name || '') !== (ei?.o_name || '') ||
+      ei.device_id !== ei.o_device_id ||
+      ei.type_id !== ei.o_type_id ||
+      ei.offset !== ei.o_offset ||
+      ei.uom !== ei.o_uom ||
+      ei.factor !== ei.o_factor ||
+      ei.value_type !== ei.o_value_type ||
+      ei.writeable !== ei.o_writeable ||
+      ei.deleted !== ei.o_deleted ||
+      (ei.value || '') !== (ei.o_value || '')
+    );
+  }
+
+  const entity_theme = useTheme({
+    Table: `
+      --data-table-library_grid-template-columns: repeat(1, minmax(60px, 1fr)) minmax(80px, auto) 80px 80px 80px 90px;
+    `,
+    BaseRow: `
+      font-size: 14px;
+      .td {
+        height: 32px;
+      }
+    `,
+    BaseCell: `
+      &:nth-of-type(1) {
+        padding: 8px;
+      }
+      &:nth-of-type(2) {
+        text-align: center;
+      }
+      &:nth-of-type(3) {
+        text-align: center;
+      }
+      &:nth-of-type(4) {
+        text-align: center;
+      }
+      &:nth-of-type(5) {
+        text-align: center;
+      }
+      &:nth-of-type(6) {
+        text-align: center;
+      }
+    `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        border-bottom: 1px solid #565656;
+        height: 36px;
+      }
+    `,
+    Row: `
+      background-color: #1e1e1e;
+      position: relative;
+      cursor: pointer;
+      .td {
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+      }
+      &:hover .td {
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+      }
+      &:nth-of-type(odd) .td {
+        background-color: #303030;
+      }
+    `
+  });
+
+  const saveEntities = async () => {
+    await writeEntities({
+      entities: entities
+        .filter((ei) => !ei.deleted)
+        .map((condensed_ei) => ({
+          id: condensed_ei.id,
+          ram: condensed_ei.ram,
+          name: condensed_ei.name,
+          device_id: condensed_ei.device_id,
+          type_id: condensed_ei.type_id,
+          offset: condensed_ei.offset,
+          factor: condensed_ei.factor,
+          uom: condensed_ei.uom,
+          writeable: condensed_ei.writeable,
+          value_type: condensed_ei.value_type,
+          value: condensed_ei.value
+        }))
+    })
+      .then(() => {
+        toast.success(LL.ENTITIES_UPDATED());
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(async () => {
+        await fetchEntities();
+        setNumChanges(0);
+      });
+  };
+
+  const editEntityItem = useCallback((ei: EntityItem) => {
+    setCreating(false);
+    setSelectedEntityItem(ei);
+    setDialogOpen(true);
+  }, []);
+
+  const onDialogClose = () => {
+    setDialogOpen(false);
+  };
+
+  const onDialogCancel = async () => {
+    await fetchEntities().then(() => {
+      setNumChanges(0);
+    });
+  };
+
+  const onDialogSave = (updatedItem: EntityItem) => {
+    setDialogOpen(false);
+
+    updateState('entities', (data: EntityItem[]) => {
+      const new_data = creating
+        ? [
+            ...data.filter((ei) => creating || ei.o_id !== updatedItem.o_id),
+            updatedItem
+          ]
+        : data.map((ei) =>
+            ei.id === updatedItem.id ? { ...ei, ...updatedItem } : ei
+          );
+      setNumChanges(new_data.filter((ei) => hasEntityChanged(ei)).length);
+      return new_data;
+    });
+  };
+
+  const addEntityItem = () => {
+    setCreating(true);
+    setSelectedEntityItem({
+      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
+      name: '',
+      ram: 0,
+      device_id: '0',
+      type_id: '0',
+      offset: 0,
+      factor: 1,
+      uom: 0,
+      value_type: 0,
+      writeable: false,
+      deleted: false,
+      value: ''
+    });
+    setDialogOpen(true);
+  };
+
+  function formatValue(value: unknown, uom: number) {
+    return value === undefined
+      ? ''
+      : typeof value === 'number'
+        ? new Intl.NumberFormat().format(value) +
+          (uom === 0 ? '' : ' ' + DeviceValueUOM_s[uom])
+        : (value as string);
+  }
+
+  function showHex(value: number, digit: number) {
+    return '0x' + value.toString(16).toUpperCase().padStart(digit, '0');
+  }
+
+  const renderEntity = () => {
+    if (!entities) {
+      return <FormLoader onRetry={fetchEntities} errorMessage={error?.message} />;
+    }
+
+    return (
+      <Table
+        data={{
+          nodes: entities
+            .filter((ei) => !ei.deleted)
+            .sort((a, b) => a.name.localeCompare(b.name))
+        }}
+        theme={entity_theme}
+        layout={{ custom: true }}
+      >
+        {(tableList: EntityItem[]) => (
+          <>
+            <Header>
+              <HeaderRow>
+                <HeaderCell>{LL.NAME(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.ID_OF(LL.DEVICE())}</HeaderCell>
+                <HeaderCell stiff>{LL.ID_OF(LL.TYPE(1))}</HeaderCell>
+                <HeaderCell stiff>{LL.OFFSET()}</HeaderCell>
+                <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.VALUE(0)}</HeaderCell>
+              </HeaderRow>
+            </Header>
+            <Body>
+              {tableList.map((ei: EntityItem) => (
+                <Row key={ei.name} item={ei} onClick={() => editEntityItem(ei)}>
+                  <Cell>
+                    {ei.name}&nbsp;
+                    {ei.writeable && (
+                      <EditOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+                    )}
+                  </Cell>
+                  <Cell>
+                    {ei.ram === 1 ? '' : showHex(ei.device_id as number, 2)}
+                  </Cell>
+                  <Cell>{ei.ram === 1 ? '' : showHex(ei.type_id as number, 3)}</Cell>
+                  <Cell>{ei.ram === 1 ? '' : ei.offset}</Cell>
+                  <Cell>
+                    {ei.ram === 1 ? 'RAM' : DeviceValueTypeNames[ei.value_type]}
+                  </Cell>
+                  <Cell>{formatValue(ei.value, ei.uom)}</Cell>
+                </Row>
+              ))}
+            </Body>
+          </>
+        )}
+      </Table>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      <Box mb={2} color="warning.main">
+        <Typography variant="body2">{LL.ENTITIES_HELP_1()}</Typography>
+      </Box>
+
+      {renderEntity()}
+
+      {selectedEntityItem && (
+        <SettingsCustomEntitiesDialog
+          open={dialogOpen}
+          creating={creating}
+          onClose={onDialogClose}
+          onSave={onDialogSave}
+          selectedItem={selectedEntityItem}
+          validator={entityItemValidation(entities, selectedEntityItem)}
+        />
+      )}
+
+      <Box mt={1} display="flex" flexWrap="wrap">
+        <Box flexGrow={1}>
+          {numChanges > 0 && (
+            <ButtonRow>
+              <Button
+                startIcon={<CancelIcon />}
+                variant="outlined"
+                onClick={onDialogCancel}
+                color="secondary"
+              >
+                {LL.CANCEL()}
+              </Button>
+              <Button
+                startIcon={<WarningIcon color="warning" />}
+                variant="contained"
+                color="info"
+                onClick={saveEntities}
+              >
+                {LL.APPLY_CHANGES(numChanges)}
+              </Button>
+            </ButtonRow>
+          )}
+        </Box>
+        <Box flexWrap="nowrap" whiteSpace="nowrap">
+          <ButtonRow>
+            <Button
+              startIcon={<RefreshIcon />}
+              variant="outlined"
+              color="secondary"
+              onClick={fetchEntities}
+            >
+              {LL.REFRESH()}
+            </Button>
+            <Button
+              startIcon={<AddIcon />}
+              variant="outlined"
+              color="primary"
+              onClick={addEntityItem}
+            >
+              {LL.ADD(0)}
+            </Button>
+          </ButtonRow>
+        </Box>
+      </Box>
+    </SectionContent>
+  );
+};
+
+export default CustomEntities;

interface/src/app/main/CustomEntitiesDialog.tsx

@@ -0,0 +1,337 @@
+import { useEffect, useState } from 'react';
+
+import AddIcon from '@mui/icons-material/Add';
+import CancelIcon from '@mui/icons-material/Cancel';
+import DoneIcon from '@mui/icons-material/Done';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  InputAdornment,
+  MenuItem,
+  TextField
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
+import { BlockFormControlLabel, ValidatedTextField } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { numberValue, updateValue } from 'utils';
+import { validate } from 'validators';
+
+import { DeviceValueType, DeviceValueTypeNames, DeviceValueUOM_s } from './types';
+import type { EntityItem } from './types';
+
+interface CustomEntitiesDialogProps {
+  open: boolean;
+  creating: boolean;
+  onClose: () => void;
+  onSave: (ei: EntityItem) => void;
+  selectedItem: EntityItem;
+  validator: Schema;
+}
+
+const CustomEntitiesDialog = ({
+  open,
+  creating,
+  onClose,
+  onSave,
+  selectedItem,
+  validator
+}: CustomEntitiesDialogProps) => {
+  const { LL } = useI18nContext();
+  const [editItem, setEditItem] = useState<EntityItem>(selectedItem);
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+  const updateFormValue = updateValue(setEditItem);
+
+  useEffect(() => {
+    if (open) {
+      setFieldErrors(undefined);
+      setEditItem(selectedItem);
+      // convert to hex strings straight away
+      setEditItem({
+        ...selectedItem,
+        device_id: selectedItem.device_id.toString(16).toUpperCase(),
+        type_id: selectedItem.type_id.toString(16).toUpperCase()
+      });
+    }
+  }, [open, selectedItem]);
+
+  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
+  };
+
+  const save = async () => {
+    try {
+      setFieldErrors(undefined);
+      await validate(validator, editItem);
+      if (typeof editItem.device_id === 'string') {
+        editItem.device_id = parseInt(editItem.device_id, 16);
+      }
+      if (typeof editItem.type_id === 'string') {
+        editItem.type_id = parseInt(editItem.type_id, 16);
+      }
+      onSave(editItem);
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+  };
+
+  const remove = () => {
+    editItem.deleted = true;
+    onSave(editItem);
+  };
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
+      <DialogTitle>
+        {creating ? LL.ADD(1) + ' ' + LL.NEW(1) : LL.EDIT()}&nbsp;{LL.ENTITY()}
+      </DialogTitle>
+      <DialogContent dividers>
+        <Box display="flex" flexWrap="wrap" mb={1}>
+          <Box flexWrap="nowrap" whiteSpace="nowrap" />
+        </Box>
+        <Grid container spacing={2}>
+          <Grid item xs={4}>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="name"
+              label={LL.NAME(0)}
+              value={editItem.name}
+              margin="normal"
+              fullWidth
+              onChange={updateFormValue}
+            />
+          </Grid>
+          <Grid item xs={4}>
+            <TextField
+              name="ram"
+              label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
+              value={editItem.ram}
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              fullWidth
+              select
+            >
+              <MenuItem value={0}>EMS-{LL.VALUE(1)}</MenuItem>
+              <MenuItem value={1}>RAM-{LL.VALUE(1)}</MenuItem>
+            </TextField>
+          </Grid>
+          {editItem.ram === 1 && (
+            <Grid item xs={4}>
+              <TextField
+                name="value"
+                label={LL.DEFAULT(0) + ' ' + LL.VALUE(0)}
+                type="string"
+                value={editItem.value as string}
+                variant="outlined"
+                onChange={updateFormValue}
+                fullWidth
+                margin="normal"
+              />
+            </Grid>
+          )}
+          {editItem.ram === 0 && (
+            <>
+              <Grid item xs={4} mt={3}>
+                <BlockFormControlLabel
+                  control={
+                    <Checkbox
+                      checked={editItem.writeable}
+                      onChange={updateFormValue}
+                      name="writeable"
+                    />
+                  }
+                  label={LL.WRITEABLE()}
+                />
+              </Grid>
+              <Grid item xs={4}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="device_id"
+                  label={LL.ID_OF(LL.DEVICE())}
+                  margin="normal"
+                  type="string"
+                  fullWidth
+                  value={editItem.device_id as string}
+                  onChange={updateFormValue}
+                  inputProps={{ style: { textTransform: 'uppercase' } }}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">0x</InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={4}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="type_id"
+                  label={LL.ID_OF(LL.TYPE(1))}
+                  margin="normal"
+                  fullWidth
+                  type="string"
+                  value={editItem.type_id as string}
+                  onChange={updateFormValue}
+                  inputProps={{ style: { textTransform: 'uppercase' } }}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">0x</InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={4}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="offset"
+                  label={LL.OFFSET()}
+                  margin="normal"
+                  fullWidth
+                  type="number"
+                  value={editItem.offset}
+                  onChange={updateFormValue}
+                />
+              </Grid>
+              <Grid item xs={4}>
+                <TextField
+                  name="value_type"
+                  label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
+                  value={editItem.value_type}
+                  variant="outlined"
+                  onChange={updateFormValue}
+                  margin="normal"
+                  fullWidth
+                  select
+                >
+                  <MenuItem value={DeviceValueType.BOOL}>
+                    {DeviceValueTypeNames[DeviceValueType.BOOL]}
+                  </MenuItem>
+                  <MenuItem value={DeviceValueType.INT8}>
+                    {DeviceValueTypeNames[DeviceValueType.INT8]}
+                  </MenuItem>
+                  <MenuItem value={DeviceValueType.UINT8}>
+                    {DeviceValueTypeNames[DeviceValueType.UINT8]}
+                  </MenuItem>
+                  <MenuItem value={DeviceValueType.INT16}>
+                    {DeviceValueTypeNames[DeviceValueType.INT16]}
+                  </MenuItem>
+                  <MenuItem value={DeviceValueType.UINT16}>
+                    {DeviceValueTypeNames[DeviceValueType.UINT16]}
+                  </MenuItem>
+                  <MenuItem value={DeviceValueType.UINT24}>
+                    {DeviceValueTypeNames[DeviceValueType.UINT24]}
+                  </MenuItem>
+                  <MenuItem value={DeviceValueType.TIME}>
+                    {DeviceValueTypeNames[DeviceValueType.TIME]}
+                  </MenuItem>
+                  <MenuItem value={DeviceValueType.UINT32}>
+                    {DeviceValueTypeNames[DeviceValueType.UINT32]}
+                  </MenuItem>
+                  <MenuItem value={DeviceValueType.STRING}>
+                    {DeviceValueTypeNames[DeviceValueType.STRING]}
+                  </MenuItem>
+                </TextField>
+              </Grid>
+
+              {editItem.value_type !== DeviceValueType.BOOL &&
+                editItem.value_type !== DeviceValueType.STRING && (
+                  <>
+                    <Grid item xs={4}>
+                      <TextField
+                        name="factor"
+                        label={LL.FACTOR()}
+                        value={numberValue(editItem.factor)}
+                        variant="outlined"
+                        onChange={updateFormValue}
+                        fullWidth
+                        margin="normal"
+                        type="number"
+                        inputProps={{ step: '0.001' }}
+                      />
+                    </Grid>
+                    <Grid item xs={4}>
+                      <TextField
+                        name="uom"
+                        label={LL.UNIT()}
+                        value={editItem.uom}
+                        margin="normal"
+                        fullWidth
+                        onChange={updateFormValue}
+                        select
+                      >
+                        {DeviceValueUOM_s.map((val, i) => (
+                          <MenuItem key={i} value={i}>
+                            {val}
+                          </MenuItem>
+                        ))}
+                      </TextField>
+                    </Grid>
+                  </>
+                )}
+              {editItem.value_type === DeviceValueType.STRING &&
+                editItem.device_id !== '0' && (
+                  <Grid item xs={4}>
+                    <TextField
+                      name="factor"
+                      label="Bytes"
+                      value={editItem.factor}
+                      variant="outlined"
+                      onChange={updateFormValue}
+                      fullWidth
+                      margin="normal"
+                      type="number"
+                      inputProps={{ min: '1', max: '27', step: '1' }}
+                    />
+                  </Grid>
+                )}
+            </>
+          )}
+        </Grid>
+      </DialogContent>
+
+      <DialogActions>
+        {!creating && (
+          <Box flexGrow={1}>
+            <Button
+              startIcon={<RemoveIcon />}
+              variant="outlined"
+              color="warning"
+              onClick={remove}
+            >
+              {LL.REMOVE()}
+            </Button>
+          </Box>
+        )}
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={creating ? <AddIcon /> : <DoneIcon />}
+          variant="outlined"
+          onClick={save}
+          color="primary"
+        >
+          {creating ? LL.ADD(0) : LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CustomEntitiesDialog;

interface/src/app/main/Customization.tsx

@@ -0,0 +1,741 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { FC } from 'react';
+import { useBlocker, useLocation } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import EditIcon from '@mui/icons-material/Edit';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import SaveIcon from '@mui/icons-material/Save';
+import SearchIcon from '@mui/icons-material/Search';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  InputAdornment,
+  Link,
+  MenuItem,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography
+} from '@mui/material';
+
+import * as SystemApi from 'api/system';
+
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova';
+import RestartMonitor from 'app/status/RestartMonitor';
+import {
+  BlockNavigation,
+  ButtonRow,
+  MessageBox,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import * as EMSESP from './api';
+import SettingsCustomizationDialog from './CustomizationDialog';
+import EntityMaskToggle from './EntityMaskToggle';
+import OptionIcon from './OptionIcon';
+import { DeviceEntityMask } from './types';
+import type { DeviceEntity, DeviceShort } from './types';
+
+export const APIURL = window.location.origin + '/api/';
+
+const Customization: FC = () => {
+  const { LL } = useI18nContext();
+  const [numChanges, setNumChanges] = useState<number>(0);
+  const blocker = useBlocker(numChanges !== 0);
+
+  const [restarting, setRestarting] = useState<boolean>(false);
+  const [restartNeeded, setRestartNeeded] = useState<boolean>(false);
+  const [deviceEntities, setDeviceEntities] = useState<DeviceEntity[]>([]);
+  const [confirmReset, setConfirmReset] = useState<boolean>(false);
+  const [selectedFilters, setSelectedFilters] = useState<number>(0);
+  const [search, setSearch] = useState('');
+  const [selectedDeviceEntity, setSelectedDeviceEntity] = useState<DeviceEntity>();
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [rename, setRename] = useState<boolean>(false);
+
+  useLayoutTitle(LL.CUSTOMIZATIONS());
+
+  // fetch devices first
+  const { data: devices, send: fetchDevices } = useRequest(EMSESP.readDevices);
+
+  const [selectedDevice, setSelectedDevice] = useState<number>(
+    Number(useLocation().state) || -1
+  );
+  const [selectedDeviceTypeNameURL, setSelectedDeviceTypeNameURL] =
+    useState<string>(''); // needed for API URL
+  const [selectedDeviceName, setSelectedDeviceName] = useState<string>('');
+
+  const { send: resetCustomizations } = useRequest(EMSESP.resetCustomizations(), {
+    immediate: false
+  });
+
+  const { send: writeDeviceName } = useRequest(
+    (data: { id: number; name: string }) => EMSESP.writeDeviceName(data),
+    {
+      immediate: false
+    }
+  );
+
+  const { send: writeCustomizationEntities } = useRequest(
+    (data: { id: number; entity_ids: string[] }) =>
+      EMSESP.writeCustomizationEntities(data),
+    {
+      immediate: false
+    }
+  );
+
+  const { send: readDeviceEntities, onSuccess: onSuccess } = useRequest(
+    (data: number) => EMSESP.readDeviceEntities(data),
+    {
+      initialData: [],
+      immediate: false
+    }
+  );
+
+  const setOriginalSettings = (data: DeviceEntity[]) => {
+    setDeviceEntities(
+      data.map((de) => ({
+        ...de,
+        o_m: de.m,
+        o_cn: de.cn,
+        o_mi: de.mi,
+        o_ma: de.ma
+      }))
+    );
+  };
+
+  onSuccess((event) => {
+    setOriginalSettings(event.data);
+  });
+
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
+
+  const entities_theme = useTheme({
+    Table: `
+      --data-table-library_grid-template-columns: 156px repeat(1, minmax(80px, 1fr)) 45px minmax(45px, auto) minmax(120px, auto);
+    `,
+    BaseRow: `
+      font-size: 14px;
+      .td {
+        height: 32px;
+      }
+    `,
+    BaseCell: `
+      &:nth-of-type(3) {
+        text-align: right;
+      }
+      &:nth-of-type(4) {
+        text-align: right;
+      }
+      &:last-of-type {
+        text-align: right;
+      }
+    `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        border-bottom: 1px solid #565656;
+        height: 36px;
+      }
+      &:nth-of-type(1) .th {
+        text-align: center;
+      }
+    `,
+    Row: `
+      background-color: #1e1e1e;
+      position: relative;
+      cursor: pointer;
+      .td {
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+      }
+      &.tr.tr-body.row-select.row-select-single-selected {
+        background-color: #3d4752;
+      }
+      &:hover .td {
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+      }
+      &:nth-of-type(odd) .td {
+        background-color: #303030;
+      }
+    `,
+    Cell: `
+      &:nth-of-type(2) {
+        padding: 8px;
+      }
+      &:nth-of-type(3) {
+        padding-right: 4px;
+      }
+      &:nth-of-type(4) {
+        padding-right: 4px;
+      }
+      &:last-of-type {
+        padding-right: 8px;
+      }
+    `
+  });
+
+  function hasEntityChanged(de: DeviceEntity) {
+    return (
+      (de?.cn || '') !== (de?.o_cn || '') ||
+      de.m !== de.o_m ||
+      de.ma !== de.o_ma ||
+      de.mi !== de.o_mi
+    );
+  }
+
+  useEffect(() => {
+    if (deviceEntities.length) {
+      setNumChanges(
+        deviceEntities
+          .filter((de) => hasEntityChanged(de))
+          .map(
+            (new_de) =>
+              new_de.m.toString(16).padStart(2, '0') +
+              new_de.id +
+              (new_de.cn || new_de.mi || new_de.ma ? '|' : '') +
+              (new_de.cn ? new_de.cn : '') +
+              (new_de.mi ? '>' + new_de.mi : '') +
+              (new_de.ma ? '<' + new_de.ma : '')
+          ).length
+      );
+    }
+  }, [deviceEntities]);
+
+  useEffect(() => {
+    if (devices && selectedDevice !== -1) {
+      void readDeviceEntities(selectedDevice);
+      const id = devices.devices.findIndex((d) => d.i === selectedDevice);
+      if (id === -1) {
+        setSelectedDevice(-1);
+        setSelectedDeviceTypeNameURL('');
+      } else {
+        setSelectedDeviceTypeNameURL(devices.devices[id].url || '');
+        setSelectedDeviceName(devices.devices[id].s);
+        setNumChanges(0);
+        setRestartNeeded(false);
+      }
+    }
+  }, [devices, selectedDevice]);
+
+  const restart = async () => {
+    await restartCommand().catch((error: Error) => {
+      toast.error(error.message);
+    });
+    setRestarting(true);
+  };
+
+  function formatValue(value: unknown) {
+    if (typeof value === 'number') {
+      return new Intl.NumberFormat().format(value);
+    } else if (value === undefined) {
+      return '';
+    } else if (typeof value === 'boolean') {
+      return value ? 'true' : 'false';
+    }
+    return value as string;
+  }
+
+  const formatName = (de: DeviceEntity, withShortname: boolean) =>
+    (de.n && de.n[0] === '!'
+      ? LL.COMMAND(1) + ': ' + de.n.slice(1)
+      : de.cn && de.cn !== ''
+        ? de.cn
+        : de.n) + (withShortname ? ' ' + de.id : '');
+
+  const getMaskNumber = (newMask: string[]) => {
+    let new_mask = 0;
+    for (const entry of newMask) {
+      new_mask |= Number(entry);
+    }
+    return new_mask;
+  };
+
+  const getMaskString = (m: number) => {
+    const new_masks: string[] = [];
+    if ((m & 1) === 1) {
+      new_masks.push('1');
+    }
+    if ((m & 2) === 2) {
+      new_masks.push('2');
+    }
+    if ((m & 4) === 4) {
+      new_masks.push('4');
+    }
+    if ((m & 8) === 8) {
+      new_masks.push('8');
+    }
+    if ((m & 128) === 128) {
+      new_masks.push('128');
+    }
+    return new_masks;
+  };
+
+  const filter_entity = (de: DeviceEntity) =>
+    (de.m & selectedFilters || !selectedFilters) &&
+    formatName(de, true).includes(search.toLocaleLowerCase());
+
+  const maskDisabled = (set: boolean) => {
+    setDeviceEntities(
+      deviceEntities.map(function (de) {
+        if (filter_entity(de)) {
+          return {
+            ...de,
+            m: set
+              ? de.m |
+                (DeviceEntityMask.DV_API_MQTT_EXCLUDE |
+                  DeviceEntityMask.DV_WEB_EXCLUDE)
+              : de.m &
+                ~(
+                  DeviceEntityMask.DV_API_MQTT_EXCLUDE |
+                  DeviceEntityMask.DV_WEB_EXCLUDE
+                )
+          };
+        } else {
+          return de;
+        }
+      })
+    );
+  };
+
+  const resetCustomization = async () => {
+    try {
+      await resetCustomizations();
+      toast.info(LL.CUSTOMIZATIONS_RESTART());
+    } catch (error) {
+      toast.error((error as Error).message);
+    } finally {
+      setConfirmReset(false);
+    }
+  };
+
+  const onDialogClose = () => {
+    setDialogOpen(false);
+  };
+
+  const updateDeviceEntity = (updatedItem: DeviceEntity) => {
+    setDeviceEntities(
+      deviceEntities?.map((de) =>
+        de.id === updatedItem.id ? { ...de, ...updatedItem } : de
+      )
+    );
+  };
+
+  const onDialogSave = (updatedItem: DeviceEntity) => {
+    setDialogOpen(false);
+    updateDeviceEntity(updatedItem);
+  };
+
+  const editDeviceEntity = useCallback((de: DeviceEntity) => {
+    if (de.n === undefined || (de.n && de.n[0] === '!')) {
+      return;
+    }
+
+    if (de.cn === undefined) {
+      de.cn = '';
+    }
+
+    setSelectedDeviceEntity(de);
+    setDialogOpen(true);
+  }, []);
+
+  const saveCustomization = async () => {
+    if (devices && deviceEntities && selectedDevice !== -1) {
+      const masked_entities = deviceEntities
+        .filter((de: DeviceEntity) => hasEntityChanged(de))
+        .map(
+          (new_de) =>
+            new_de.m.toString(16).padStart(2, '0') +
+            new_de.id +
+            (new_de.cn || new_de.mi || new_de.ma ? '|' : '') +
+            (new_de.cn ? new_de.cn : '') +
+            (new_de.mi ? '>' + new_de.mi : '') +
+            (new_de.ma ? '<' + new_de.ma : '')
+        );
+
+      // check size in bytes to match buffer in CPP, which is 2048
+      const bytes = new TextEncoder().encode(JSON.stringify(masked_entities)).length;
+      if (bytes > 2000) {
+        toast.warning(LL.CUSTOMIZATIONS_FULL());
+        return;
+      }
+
+      await writeCustomizationEntities({
+        id: selectedDevice,
+        entity_ids: masked_entities
+      }).catch((error: Error) => {
+        if (error.message === 'Reboot required') {
+          setRestartNeeded(true);
+        } else {
+          toast.error(error.message);
+        }
+      });
+      setOriginalSettings(deviceEntities);
+    }
+  };
+
+  const renameDevice = async () => {
+    await writeDeviceName({ id: selectedDevice, name: selectedDeviceName })
+      .then(() => {
+        toast.success(LL.UPDATED_OF(LL.NAME(1)));
+      })
+      .catch(() => {
+        toast.error(LL.UPDATE_OF(LL.NAME(1)) + ' ' + LL.FAILED(1));
+      })
+      .finally(async () => {
+        setRename(false);
+        await fetchDevices();
+      });
+  };
+
+  const renderDeviceList = () => (
+    <>
+      <Box mb={1} color="warning.main">
+        <Typography variant="body2">{LL.CUSTOMIZATIONS_HELP_1()}.</Typography>
+      </Box>
+      <Box display="flex" flexWrap="wrap" alignItems="center" gap={2}>
+        {rename ? (
+          <TextField
+            name="device"
+            label={LL.EMS_DEVICE()}
+            fullWidth
+            variant="outlined"
+            value={selectedDeviceName}
+            onChange={(e) => setSelectedDeviceName(e.target.value)}
+            margin="normal"
+          />
+        ) : (
+          <TextField
+            name="device"
+            label={LL.EMS_DEVICE()}
+            variant="outlined"
+            value={selectedDevice}
+            disabled={numChanges !== 0}
+            onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
+            margin="normal"
+            style={{ minWidth: '50%' }}
+            select
+          >
+            <MenuItem disabled key={-1} value={-1}>
+              {LL.SELECT_DEVICE()}...
+            </MenuItem>
+            {devices.devices.map((device: DeviceShort) => (
+              <MenuItem key={device.i} value={device.i}>
+                {device.s}&nbsp;({device.tn})
+              </MenuItem>
+            ))}
+          </TextField>
+        )}
+        {selectedDevice !== -1 &&
+          (rename ? (
+            <ButtonRow>
+              <Button
+                startIcon={<SaveIcon />}
+                variant="contained"
+                onClick={() => renameDevice()}
+              >
+                {LL.UPDATE()}
+              </Button>
+              <Button
+                startIcon={<CancelIcon />}
+                variant="outlined"
+                color="secondary"
+                onClick={() => setRename(false)}
+              >
+                {LL.CANCEL()}
+              </Button>
+            </ButtonRow>
+          ) : (
+            <Button
+              startIcon={<EditIcon />}
+              variant="outlined"
+              onClick={() => setRename(true)}
+            >
+              {LL.RENAME()}
+            </Button>
+          ))}
+      </Box>
+    </>
+  );
+
+  const renderDeviceData = () => {
+    const shown_data = deviceEntities.filter((de) => filter_entity(de));
+
+    return (
+      <>
+        <Box color="warning.main">
+          <Typography variant="body2" mt={1}>
+            <OptionIcon type="favorite" isSet={true} />={LL.CUSTOMIZATIONS_HELP_2()}
+            &nbsp;&nbsp;
+            <OptionIcon type="readonly" isSet={true} />={LL.CUSTOMIZATIONS_HELP_3()}
+            &nbsp;&nbsp;
+            <OptionIcon type="api_mqtt_exclude" isSet={true} />=
+            {LL.CUSTOMIZATIONS_HELP_4()}&nbsp;&nbsp;
+            <OptionIcon type="web_exclude" isSet={true} />=
+            {LL.CUSTOMIZATIONS_HELP_5()}&nbsp;&nbsp;
+            <OptionIcon type="deleted" isSet={true} />={LL.CUSTOMIZATIONS_HELP_6()}
+          </Typography>
+        </Box>
+        <Grid
+          container
+          mb={1}
+          mt={0}
+          spacing={1}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="center"
+        >
+          <Grid item xs={2}>
+            <TextField
+              size="small"
+              variant="outlined"
+              placeholder={LL.SEARCH()}
+              onChange={(event) => {
+                setSearch(event.target.value);
+              }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon color="primary" sx={{ fontSize: 16 }} />
+                  </InputAdornment>
+                )
+              }}
+            />
+          </Grid>
+          <Grid item>
+            <ToggleButtonGroup
+              size="small"
+              color="secondary"
+              value={getMaskString(selectedFilters)}
+              onChange={(event, mask: string[]) => {
+                setSelectedFilters(getMaskNumber(mask));
+              }}
+            >
+              <ToggleButton value="8">
+                <OptionIcon type="favorite" isSet={true} />
+              </ToggleButton>
+              <ToggleButton value="4">
+                <OptionIcon type="readonly" isSet={true} />
+              </ToggleButton>
+              <ToggleButton value="2">
+                <OptionIcon type="api_mqtt_exclude" isSet={true} />
+              </ToggleButton>
+              <ToggleButton value="1">
+                <OptionIcon type="web_exclude" isSet={true} />
+              </ToggleButton>
+              <ToggleButton value="128">
+                <OptionIcon type="deleted" isSet={true} />
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Grid>
+          <Grid item>
+            <Button
+              size="small"
+              sx={{ fontSize: 10 }}
+              variant="outlined"
+              color="inherit"
+              onClick={() => maskDisabled(false)}
+            >
+              {LL.SET_ALL()}&nbsp;
+              <OptionIcon type="api_mqtt_exclude" isSet={false} />
+              <OptionIcon type="web_exclude" isSet={false} />
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button
+              size="small"
+              sx={{ fontSize: 10 }}
+              variant="outlined"
+              color="inherit"
+              onClick={() => maskDisabled(true)}
+            >
+              {LL.SET_ALL()}&nbsp;
+              <OptionIcon type="api_mqtt_exclude" isSet={true} />
+              <OptionIcon type="web_exclude" isSet={true} />
+            </Button>
+          </Grid>
+          <Grid item>
+            <Typography variant="subtitle2" color="primary">
+              {LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}
+              &nbsp;{LL.ENTITIES(deviceEntities.length)}
+            </Typography>
+          </Grid>
+        </Grid>
+        <Table
+          data={{ nodes: shown_data }}
+          theme={entities_theme}
+          layout={{ custom: true }}
+        >
+          {(tableList: DeviceEntity[]) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCell stiff>{LL.OPTIONS()}</HeaderCell>
+                  <HeaderCell resize>{LL.NAME(1)}</HeaderCell>
+                  <HeaderCell stiff>{LL.MIN()}</HeaderCell>
+                  <HeaderCell stiff>{LL.MAX()}</HeaderCell>
+                  <HeaderCell resize>{LL.VALUE(0)}</HeaderCell>
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((de: DeviceEntity) => (
+                  <Row key={de.id} item={de} onClick={() => editDeviceEntity(de)}>
+                    <Cell stiff>
+                      <EntityMaskToggle onUpdate={updateDeviceEntity} de={de} />
+                    </Cell>
+                    <Cell>
+                      {formatName(de, false)}&nbsp;(
+                      <Link
+                        target="_blank"
+                        href={APIURL + selectedDeviceTypeNameURL + '/' + de.id}
+                      >
+                        {de.id}
+                      </Link>
+                      )
+                    </Cell>
+                    <Cell>
+                      {!(de.m & DeviceEntityMask.DV_READONLY) && formatValue(de.mi)}
+                    </Cell>
+                    <Cell>
+                      {!(de.m & DeviceEntityMask.DV_READONLY) && formatValue(de.ma)}
+                    </Cell>
+                    <Cell>{formatValue(de.v)}</Cell>
+                  </Row>
+                ))}
+              </Body>
+            </>
+          )}
+        </Table>
+      </>
+    );
+  };
+
+  const renderResetDialog = () => (
+    <Dialog
+      sx={dialogStyle}
+      open={confirmReset}
+      onClose={() => setConfirmReset(false)}
+    >
+      <DialogTitle>{LL.RESET(1)}</DialogTitle>
+      <DialogContent dividers>{LL.CUSTOMIZATIONS_RESET()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmReset(false)}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<SettingsBackupRestoreIcon />}
+          variant="outlined"
+          onClick={resetCustomization}
+          color="error"
+        >
+          {LL.RESET(0)}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
+  const renderContent = () => (
+    <>
+      {devices && renderDeviceList()}
+      {selectedDevice !== -1 && !rename && renderDeviceData()}
+      {restartNeeded && (
+        <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
+          <Button
+            startIcon={<PowerSettingsNewIcon />}
+            variant="contained"
+            color="error"
+            onClick={restart}
+          >
+            {LL.RESTART()}
+          </Button>
+        </MessageBox>
+      )}
+      {!restartNeeded && (
+        <Box display="flex" flexWrap="wrap">
+          <Box flexGrow={1}>
+            {numChanges !== 0 && (
+              <ButtonRow>
+                <Button
+                  startIcon={<CancelIcon />}
+                  variant="outlined"
+                  color="secondary"
+                  onClick={() => devices && readDeviceEntities(selectedDevice)}
+                >
+                  {LL.CANCEL()}
+                </Button>
+                <Button
+                  startIcon={<WarningIcon color="warning" />}
+                  variant="contained"
+                  color="info"
+                  onClick={saveCustomization}
+                >
+                  {LL.APPLY_CHANGES(numChanges)}
+                </Button>
+              </ButtonRow>
+            )}
+          </Box>
+          <ButtonRow mt={1}>
+            <Button
+              startIcon={<SettingsBackupRestoreIcon />}
+              variant="outlined"
+              color="error"
+              onClick={() => setConfirmReset(true)}
+            >
+              {LL.RESET(0)}
+            </Button>
+          </ButtonRow>
+        </Box>
+      )}
+      {renderResetDialog()}
+    </>
+  );
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {restarting ? <RestartMonitor /> : renderContent()}
+      {selectedDeviceEntity && (
+        <SettingsCustomizationDialog
+          open={dialogOpen}
+          onClose={onDialogClose}
+          onSave={onDialogSave}
+          selectedItem={selectedDeviceEntity}
+        />
+      )}
+    </SectionContent>
+  );
+};
+
+export default Customization;

interface/src/app/main/CustomizationDialog.tsx

@@ -0,0 +1,178 @@
+import { useEffect, useState } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import CloseIcon from '@mui/icons-material/Close';
+import DoneIcon from '@mui/icons-material/Done';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  TextField,
+  Typography
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import { useI18nContext } from 'i18n/i18n-react';
+import { updateValue } from 'utils';
+
+import EntityMaskToggle from './EntityMaskToggle';
+import { DeviceEntityMask } from './types';
+import type { DeviceEntity } from './types';
+
+interface SettingsCustomizationDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (di: DeviceEntity) => void;
+  selectedItem: DeviceEntity;
+}
+
+const CustomizationDialog = ({
+  open,
+  onClose,
+  onSave,
+  selectedItem
+}: SettingsCustomizationDialogProps) => {
+  const { LL } = useI18nContext();
+  const [editItem, setEditItem] = useState<DeviceEntity>(selectedItem);
+  const [error, setError] = useState<boolean>(false);
+
+  const updateFormValue = updateValue(setEditItem);
+
+  const isWriteableNumber =
+    typeof editItem.v === 'number' &&
+    editItem.w &&
+    !(editItem.m & DeviceEntityMask.DV_READONLY);
+
+  useEffect(() => {
+    if (open) {
+      setError(false);
+      setEditItem(selectedItem);
+    }
+  }, [open, selectedItem]);
+
+  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
+  };
+
+  const save = () => {
+    if (
+      isWriteableNumber &&
+      editItem.mi &&
+      editItem.ma &&
+      editItem.mi > editItem?.ma
+    ) {
+      setError(true);
+    } else {
+      onSave(editItem);
+    }
+  };
+
+  const updateDeviceEntity = (updatedItem: DeviceEntity) => {
+    setEditItem({ ...editItem, m: updatedItem.m });
+  };
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
+      <DialogTitle>{LL.EDIT() + ' ' + LL.ENTITY()}</DialogTitle>
+      <DialogContent dividers>
+        <Grid container direction="row">
+          <Typography variant="body2" color="warning.main">
+            {LL.ID_OF(LL.ENTITY())}:&nbsp;
+          </Typography>
+          <Typography variant="body2">{editItem.id}</Typography>
+        </Grid>
+
+        <Grid container direction="row">
+          <Typography variant="body2" color="warning.main">
+            {LL.DEFAULT(1) + ' ' + LL.ENTITY_NAME(1)}:&nbsp;
+          </Typography>
+          <Typography variant="body2">{editItem.n}</Typography>
+        </Grid>
+
+        <Grid container direction="row">
+          <Typography variant="body2" color="warning.main">
+            {LL.WRITEABLE()}:&nbsp;
+          </Typography>
+          <Typography variant="body2">
+            {editItem.w ? (
+              <DoneIcon color="success" sx={{ fontSize: 16 }} />
+            ) : (
+              <CloseIcon color="error" sx={{ fontSize: 16 }} />
+            )}
+          </Typography>
+        </Grid>
+
+        <Box mt={1} mb={2}>
+          <EntityMaskToggle onUpdate={updateDeviceEntity} de={editItem} />
+        </Box>
+        <Grid container spacing={1}>
+          <Grid item>
+            <TextField
+              name="cn"
+              label={LL.NEW_NAME_OF(LL.ENTITY())}
+              value={editItem.cn}
+              // autoFocus
+              sx={{ width: '30ch' }}
+              onChange={updateFormValue}
+            />
+          </Grid>
+          {isWriteableNumber && (
+            <>
+              <Grid item>
+                <TextField
+                  name="mi"
+                  label={LL.MIN()}
+                  value={editItem.mi}
+                  sx={{ width: '8ch' }}
+                  type="number"
+                  onChange={updateFormValue}
+                />
+              </Grid>
+              <Grid item>
+                <TextField
+                  name="ma"
+                  label={LL.MAX()}
+                  value={editItem.ma}
+                  sx={{ width: '8ch' }}
+                  type="number"
+                  onChange={updateFormValue}
+                />
+              </Grid>
+            </>
+          )}
+        </Grid>
+        {error && (
+          <Typography variant="body2" color="error" mt={2}>
+            Error: Check min and max values
+          </Typography>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<DoneIcon />}
+          variant="outlined"
+          onClick={save}
+          color="primary"
+        >
+          {LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CustomizationDialog;

interface/src/app/main/DeviceIcon.tsx

@@ -0,0 +1,65 @@
+import type { FC } from 'react';
+import { AiOutlineAlert, AiOutlineControl, AiOutlineGateway } from 'react-icons/ai';
+import { CgSmartHomeBoiler } from 'react-icons/cg';
+import { FaSolarPanel } from 'react-icons/fa';
+import { GiHeatHaze, GiTap } from 'react-icons/gi';
+import {
+  MdOutlineDevices,
+  MdOutlinePool,
+  MdOutlineSensors,
+  MdThermostatAuto
+} from 'react-icons/md';
+import { TiFlowSwitch } from 'react-icons/ti';
+import { VscVmConnect } from 'react-icons/vsc';
+
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+
+import { DeviceType } from './types';
+
+interface DeviceIconProps {
+  type_id: number;
+}
+
+const DeviceIcon: FC<DeviceIconProps> = ({ type_id }) => {
+  switch (type_id as DeviceType) {
+    case DeviceType.TEMPERATURESENSOR:
+    case DeviceType.ANALOGSENSOR:
+      return <MdOutlineSensors />;
+    case DeviceType.BOILER:
+    case DeviceType.HEATSOURCE:
+      return <CgSmartHomeBoiler />;
+    case DeviceType.THERMOSTAT:
+      return <MdThermostatAuto />;
+    case DeviceType.MIXER:
+      return <AiOutlineControl />;
+    case DeviceType.SOLAR:
+      return <FaSolarPanel />;
+    case DeviceType.HEATPUMP:
+      return <GiHeatHaze />;
+    case DeviceType.GATEWAY:
+      return <AiOutlineGateway />;
+    case DeviceType.SWITCH:
+      return <TiFlowSwitch />;
+    case DeviceType.CONTROLLER:
+    case DeviceType.CONNECT:
+      return <VscVmConnect />;
+    case DeviceType.ALERT:
+      return <AiOutlineAlert />;
+    case DeviceType.EXTENSION:
+      return <MdOutlineDevices />;
+    case DeviceType.WATER:
+      return <GiTap />;
+    case DeviceType.POOL:
+      return <MdOutlinePool />;
+    case DeviceType.CUSTOM:
+      return (
+        <PlaylistAddIcon
+          sx={{ color: 'lightblue', fontSize: 22, verticalAlign: 'middle' }}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+export default DeviceIcon;

interface/src/app/main/Devices.tsx

@@ -0,0 +1,801 @@
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState
+} from 'react';
+import type { FC } from 'react';
+import { IconContext } from 'react-icons';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
+import EditIcon from '@mui/icons-material/Edit';
+import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+import DownloadIcon from '@mui/icons-material/GetApp';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import StarIcon from '@mui/icons-material/Star';
+import StarBorderOutlinedIcon from '@mui/icons-material/StarBorderOutlined';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Tooltip,
+  type TooltipProps,
+  Typography,
+  styled,
+  tooltipClasses
+} from '@mui/material';
+
+import { useRowSelect } from '@table-library/react-table-library/select';
+import { SortToggleType, useSort } from '@table-library/react-table-library/sort';
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import type { Action, State } from '@table-library/react-table-library/types/common';
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova';
+import { ButtonRow, MessageBox, SectionContent, useLayoutTitle } from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import * as EMSESP from './api';
+import DeviceIcon from './DeviceIcon';
+import DashboardDevicesDialog from './DevicesDialog';
+import { formatValue } from './deviceValue';
+import { DeviceEntityMask, DeviceType, DeviceValueUOM_s } from './types';
+import type { Device, DeviceValue } from './types';
+import { deviceValueItemValidation } from './validators';
+
+const Devices: FC = () => {
+  const { LL } = useI18nContext();
+  const { me } = useContext(AuthenticatedContext);
+
+  const [size, setSize] = useState([0, 0]);
+  const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
+  const [onlyFav, setOnlyFav] = useState(false);
+  const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false);
+  const [showDeviceInfo, setShowDeviceInfo] = useState<boolean>(false);
+  const [selectedDevice, setSelectedDevice] = useState<number>();
+
+  const navigate = useNavigate();
+
+  useLayoutTitle(LL.DEVICES());
+
+  const { data: coreData, send: readCoreData } = useRequest(
+    () => EMSESP.readCoreData(),
+    {
+      initialData: {
+        connected: true,
+        devices: []
+      }
+    }
+  );
+
+  const { data: deviceData, send: readDeviceData } = useRequest(
+    (id: number) => EMSESP.readDeviceData(id),
+    {
+      initialData: {
+        data: []
+      },
+      immediate: false
+    }
+  );
+
+  const { loading: submitting, send: writeDeviceValue } = useRequest(
+    (data: { id: number; c: string; v: unknown }) => EMSESP.writeDeviceValue(data),
+    {
+      immediate: false
+    }
+  );
+
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+
+  const leftOffset = () => {
+    const devicesWindow = document.getElementById('devices-window');
+    if (!devicesWindow) {
+      return 0;
+    }
+
+    const clientRect = devicesWindow.getBoundingClientRect();
+    const left = clientRect.left;
+    const right = clientRect.right;
+
+    if (!left || !right) {
+      return 0;
+    }
+
+    return left + (right - left < 400 ? 0 : 200);
+  };
+
+  const common_theme = useTheme({
+    BaseRow: `
+      font-size: 14px;
+    `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        border-bottom: 1px solid #565656;
+      }
+    `,
+    Row: `
+      background-color: #1E1E1E;
+      position: relative;
+      cursor: pointer;
+      .td {
+        padding: 8px;
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+      }
+      &.tr.tr-body.row-select.row-select-single-selected {
+        background-color: #3d4752;
+        font-weight: normal;
+      }
+      &:hover .td {
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+      }
+    `
+  });
+
+  const device_theme = useTheme([
+    common_theme,
+    {
+      Table: `
+        --data-table-library_grid-template-columns: 40px repeat(1, minmax(0, 1fr)) 130px;
+      `,
+      BaseRow: `
+        .td {
+          height: 42px;
+        }
+      `,
+      BaseCell: `
+        &:nth-of-type(2) {
+          text-align: left;
+        },
+        &:nth-of-type(4) {
+          text-align: center;
+        }
+      `,
+      HeaderRow: `
+        .th {
+          padding: 8px;
+          height: 36px;
+      `
+    }
+  ]);
+
+  const data_theme = useTheme([
+    common_theme,
+    {
+      Table: `
+        --data-table-library_grid-template-columns: minmax(200px, auto) minmax(150px, auto) 40px;
+        height: auto;
+        max-height: 100%;
+        overflow-y: scroll;
+        ::-webkit-scrollbar {
+          display:none;
+        }
+      `,
+      BaseRow: `
+      .td {
+        height: 32px;
+      }
+     `,
+      BaseCell: `
+        &:nth-of-type(1) {
+          border-left: 1px solid #177ac9;
+        },
+        &:nth-of-type(2) {
+          text-align: right;
+        },
+        &:nth-of-type(3) {
+          border-right: 1px solid #177ac9;
+        }
+      `,
+      HeaderRow: `
+        .th {
+          border-top: 1px solid #565656;
+        }
+      `,
+      Row: `
+        &:nth-of-type(odd) .td {
+          background-color: #303030;
+        }
+      `
+    }
+  ]);
+
+  const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} arrow classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.arrow}`]: {
+      color: theme.palette.success.main
+    },
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.success.main,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 10
+    }
+  }));
+
+  const getSortIcon = (state: State, sortKey: unknown) => {
+    if (state.sortKey === sortKey && state.reverse) {
+      return <KeyboardArrowDownOutlinedIcon />;
+    }
+    if (state.sortKey === sortKey && !state.reverse) {
+      return <KeyboardArrowUpOutlinedIcon />;
+    }
+    return <UnfoldMoreOutlinedIcon />;
+  };
+
+  const dv_sort = useSort(
+    { nodes: deviceData.data },
+    {},
+    {
+      sortIcon: {
+        iconDefault: <UnfoldMoreOutlinedIcon />,
+        iconUp: <KeyboardArrowUpOutlinedIcon />,
+        iconDown: <KeyboardArrowDownOutlinedIcon />
+      },
+      sortToggleType: SortToggleType.AlternateWithReset,
+      sortFns: {
+        NAME: (array) =>
+          array.sort((a, b) =>
+            a.id.toString().slice(2).localeCompare(b.id.toString().slice(2))
+          ),
+
+        VALUE: (array) =>
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+          array.sort((a, b) => a.v.toString().localeCompare(b.v.toString()))
+      }
+    }
+  );
+
+  async function onSelectChange(action: Action, state: State) {
+    setSelectedDevice(state.id as number);
+    if (action.type === 'ADD_BY_ID_EXCLUSIVELY') {
+      await readDeviceData(state.id as number);
+    }
+  }
+
+  const device_select = useRowSelect(
+    { nodes: coreData.devices },
+    {
+      onChange: onSelectChange
+    }
+  );
+
+  const resetDeviceSelect = () => {
+    device_select.fns.onRemoveAll();
+  };
+
+  const escFunction = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        if (device_select) {
+          device_select.fns.onRemoveAll();
+        }
+      }
+    },
+    [device_select]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', escFunction);
+    return () => {
+      document.removeEventListener('keydown', escFunction);
+    };
+  }, [escFunction]);
+
+  const refreshData = () => {
+    if (!deviceValueDialogOpen) {
+      selectedDevice ? void readDeviceData(selectedDevice) : void readCoreData();
+    }
+  };
+
+  const customize = () => {
+    if (selectedDevice == 99) {
+      navigate('/customentities');
+    } else {
+      navigate('/customizations', { state: selectedDevice });
+    }
+  };
+
+  const escapeCsvCell = (cell: string) => {
+    if (cell == null) {
+      return '';
+    }
+    const sc = cell.toString().trim();
+    if (sc === '' || sc === '""') {
+      return sc;
+    }
+    if (
+      sc.includes('"') ||
+      sc.includes(';') ||
+      sc.includes('\n') ||
+      sc.includes('\r')
+    ) {
+      return '"' + sc.replace(/"/g, '""') + '"';
+    }
+    return sc;
+  };
+
+  const hasMask = (id: string, mask: number) =>
+    (parseInt(id.slice(0, 2), 16) & mask) === mask;
+
+  const handleDownloadCsv = () => {
+    const deviceIndex = coreData.devices.findIndex(
+      (d) => d.id === device_select.state.id
+    );
+    if (deviceIndex === -1) {
+      return;
+    }
+    const filename =
+      coreData.devices[deviceIndex].tn + '_' + coreData.devices[deviceIndex].n;
+
+    const columns = [
+      {
+        accessor: (dv: DeviceValue) => dv.id.slice(2),
+        name: LL.ENTITY_NAME(0)
+      },
+      {
+        accessor: (dv: DeviceValue) =>
+          typeof dv.v === 'number' ? new Intl.NumberFormat().format(dv.v) : dv.v,
+        name: LL.VALUE(0)
+      },
+      {
+        accessor: (dv: DeviceValue) =>
+          DeviceValueUOM_s[dv.u].replace(/[^a-zA-Z0-9]/g, ''),
+        name: 'UoM'
+      },
+      {
+        accessor: (dv: DeviceValue) =>
+          dv.c && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) ? 'yes' : 'no',
+        name: LL.WRITEABLE()
+      },
+      {
+        accessor: (dv: DeviceValue) =>
+          dv.h
+            ? dv.h
+            : dv.l
+              ? dv.l.join(' | ')
+              : dv.m !== undefined && dv.x !== undefined
+                ? dv.m + ', ' + dv.x
+                : '',
+        name: 'Range'
+      }
+    ];
+
+    const data = onlyFav
+      ? deviceData.data.filter((dv) => hasMask(dv.id, DeviceEntityMask.DV_FAVORITE))
+      : deviceData.data;
+
+    const csvData = data.reduce(
+      (csvString: string, rowItem: DeviceValue) =>
+        csvString +
+        columns
+          .map(({ accessor }: { accessor: (dv: DeviceValue) => unknown }) =>
+            escapeCsvCell(accessor(rowItem) as string)
+          )
+          .join(';') +
+        '\r\n',
+      columns.map(({ name }: { name: string }) => escapeCsvCell(name)).join(';') +
+        '\r\n'
+    );
+
+    const downloadBlob = (blob: Blob) => {
+      const downloadLink = document.createElement('a');
+      downloadLink.download = filename;
+      downloadLink.href = window.URL.createObjectURL(blob);
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+    };
+
+    const device = { ...{ device: coreData.devices[deviceIndex] }, ...deviceData };
+    downloadBlob(
+      new Blob([JSON.stringify(device, null, 2)], {
+        type: 'text;charset:utf-8'
+      })
+    );
+
+    downloadBlob(new Blob([csvData], { type: 'text/csv;charset:utf-8' }));
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => refreshData(), 60000);
+    return () => {
+      clearInterval(timer);
+    };
+  });
+
+  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
+    const id = Number(device_select.state.id);
+    await writeDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
+      .then(() => {
+        toast.success(LL.WRITE_CMD_SENT());
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(async () => {
+        setDeviceValueDialogOpen(false);
+        await readDeviceData(id);
+        setSelectedDeviceValue(undefined);
+      });
+  };
+
+  const renderDeviceDetails = () => {
+    if (showDeviceInfo) {
+      const deviceIndex = coreData.devices.findIndex(
+        (d) => d.id === device_select.state.id
+      );
+      if (deviceIndex === -1) {
+        return;
+      }
+
+      return (
+        <Dialog
+          sx={dialogStyle}
+          open={showDeviceInfo}
+          onClose={() => setShowDeviceInfo(false)}
+        >
+          <DialogTitle>{LL.DEVICE_DETAILS()}</DialogTitle>
+          <DialogContent dividers>
+            <List dense={true}>
+              <ListItem>
+                <ListItemText
+                  primary={LL.TYPE(0)}
+                  secondary={coreData.devices[deviceIndex].tn}
+                />
+              </ListItem>
+              <ListItem>
+                <ListItemText
+                  primary={LL.NAME(0)}
+                  secondary={coreData.devices[deviceIndex].n}
+                />
+              </ListItem>
+              {coreData.devices[deviceIndex].t !== DeviceType.CUSTOM && (
+                <>
+                  <ListItem>
+                    <ListItemText
+                      primary={LL.BRAND()}
+                      secondary={coreData.devices[deviceIndex].b}
+                    />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText
+                      primary={LL.ID_OF(LL.DEVICE())}
+                      secondary={
+                        '0x' +
+                        (
+                          '00' +
+                          coreData.devices[deviceIndex].d.toString(16).toUpperCase()
+                        ).slice(-2)
+                      }
+                    />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText
+                      primary={LL.ID_OF(LL.PRODUCT())}
+                      secondary={coreData.devices[deviceIndex].p}
+                    />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText
+                      primary={LL.VERSION()}
+                      secondary={coreData.devices[deviceIndex].v}
+                    />
+                  </ListItem>
+                </>
+              )}
+            </List>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              variant="outlined"
+              onClick={() => setShowDeviceInfo(false)}
+              color="secondary"
+            >
+              {LL.CLOSE()}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      );
+    }
+  };
+
+  const renderCoreData = () => (
+    <IconContext.Provider
+      value={{
+        color: 'lightblue',
+        size: '18',
+        style: { verticalAlign: 'middle' }
+      }}
+    >
+      {!coreData.connected && (
+        <MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} />
+      )}
+
+      {coreData.connected && (
+        <Table
+          data={{ nodes: coreData.devices }}
+          select={device_select}
+          theme={device_theme}
+          layout={{ custom: true }}
+        >
+          {(tableList: Device[]) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCell stiff />
+                  <HeaderCell resize>{LL.DESCRIPTION()}</HeaderCell>
+                  <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((device: Device) => (
+                  <Row key={device.id} item={device}>
+                    <Cell stiff>
+                      <DeviceIcon type_id={device.t} />
+                    </Cell>
+                    <Cell>
+                      {device.n}
+                      <span style={{ color: 'lightblue' }}>
+                        &nbsp;&nbsp;({device.e})
+                      </span>
+                    </Cell>
+                    <Cell stiff>{device.tn}</Cell>
+                  </Row>
+                ))}
+              </Body>
+            </>
+          )}
+        </Table>
+      )}
+    </IconContext.Provider>
+  );
+
+  const deviceValueDialogClose = () => {
+    setDeviceValueDialogOpen(false);
+  };
+
+  const renderDeviceData = () => {
+    if (!selectedDevice) {
+      return;
+    }
+
+    const showDeviceValue = (dv: DeviceValue) => {
+      setSelectedDeviceValue(dv);
+      setDeviceValueDialogOpen(true);
+    };
+
+    const renderNameCell = (dv: DeviceValue) => (
+      <>
+        {dv.id.slice(2)}&nbsp;
+        {hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) && (
+          <StarIcon color="primary" sx={{ fontSize: 12 }} />
+        )}
+        {hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
+          <EditOffOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+        )}
+        {hasMask(dv.id, DeviceEntityMask.DV_API_MQTT_EXCLUDE) && (
+          <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+        )}
+      </>
+    );
+
+    const shown_data = onlyFav
+      ? deviceData.data.filter((dv) => hasMask(dv.id, DeviceEntityMask.DV_FAVORITE))
+      : deviceData.data;
+
+    const deviceIndex = coreData.devices.findIndex(
+      (d) => d.id === device_select.state.id
+    );
+    if (deviceIndex === -1) {
+      return;
+    }
+
+    return (
+      <Box
+        sx={{
+          backgroundColor: 'black',
+          position: 'absolute',
+          left: () => leftOffset(),
+          right: 0,
+          bottom: 0,
+          top: 64,
+          zIndex: 'modal',
+          maxHeight: () => size[1] - 126,
+          border: '1px solid #177ac9'
+        }}
+      >
+        <Box sx={{ border: '1px solid #177ac9' }}>
+          <Typography noWrap variant="subtitle1" color="warning.main" sx={{ ml: 1 }}>
+            {coreData.devices[deviceIndex].n}&nbsp;(
+            {coreData.devices[deviceIndex].tn})
+          </Typography>
+
+          <Grid container justifyContent="space-between">
+            <Typography sx={{ ml: 1 }} variant="subtitle2" color="grey">
+              {LL.SHOWING() +
+                ' ' +
+                shown_data.length +
+                '/' +
+                coreData.devices[deviceIndex].e +
+                ' ' +
+                LL.ENTITIES(shown_data.length)}
+              <ButtonTooltip title="Info">
+                <IconButton onClick={() => setShowDeviceInfo(true)}>
+                  <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+                </IconButton>
+              </ButtonTooltip>
+              {me.admin && (
+                <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
+                  <IconButton onClick={customize}>
+                    <FormatListNumberedIcon color="primary" sx={{ fontSize: 18 }} />
+                  </IconButton>
+                </ButtonTooltip>
+              )}
+              <ButtonTooltip title={LL.EXPORT()}>
+                <IconButton onClick={handleDownloadCsv}>
+                  <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
+                </IconButton>
+              </ButtonTooltip>
+              <ButtonTooltip title="Favorites">
+                <IconButton onClick={() => setOnlyFav(!onlyFav)}>
+                  {onlyFav ? (
+                    <StarIcon color="primary" sx={{ fontSize: 18 }} />
+                  ) : (
+                    <StarBorderOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+                  )}
+                </IconButton>
+              </ButtonTooltip>
+              <ButtonTooltip title={LL.REFRESH()}>
+                <IconButton onClick={refreshData}>
+                  <RefreshIcon color="primary" sx={{ fontSize: 18 }} />
+                </IconButton>
+              </ButtonTooltip>
+            </Typography>
+            <Grid item zeroMinWidth justifyContent="flex-end">
+              <ButtonTooltip title={LL.CANCEL()}>
+                <IconButton onClick={resetDeviceSelect}>
+                  <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
+                </IconButton>
+              </ButtonTooltip>
+            </Grid>
+          </Grid>
+        </Box>
+
+        <Table
+          data={{ nodes: shown_data }}
+          theme={data_theme}
+          sort={dv_sort}
+          layout={{ custom: true, fixedHeader: true }}
+        >
+          {(tableList: DeviceValue[]) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCell resize>
+                    <Button
+                      fullWidth
+                      style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                      endIcon={getSortIcon(dv_sort.state, 'NAME')}
+                      onClick={() => dv_sort.fns.onToggleSort({ sortKey: 'NAME' })}
+                    >
+                      {LL.ENTITY_NAME(0)}
+                    </Button>
+                  </HeaderCell>
+                  <HeaderCell resize>
+                    <Button
+                      fullWidth
+                      style={{ fontSize: '14px', justifyContent: 'flex-end' }}
+                      endIcon={getSortIcon(dv_sort.state, 'VALUE')}
+                      onClick={() => dv_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
+                    >
+                      {LL.VALUE(0)}
+                    </Button>
+                  </HeaderCell>
+                  <HeaderCell stiff />
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((dv: DeviceValue) => (
+                  <Row key={dv.id} item={dv} onClick={() => showDeviceValue(dv)}>
+                    <Cell>{renderNameCell(dv)}</Cell>
+                    <Cell>{formatValue(LL, dv.v, dv.u)}</Cell>
+                    <Cell stiff>
+                      {me.admin &&
+                        dv.c &&
+                        !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
+                          <IconButton
+                            size="small"
+                            onClick={() => showDeviceValue(dv)}
+                          >
+                            {dv.v === '' && dv.c ? (
+                              <PlayArrowIcon color="primary" sx={{ fontSize: 16 }} />
+                            ) : (
+                              <EditIcon color="primary" sx={{ fontSize: 16 }} />
+                            )}
+                          </IconButton>
+                        )}
+                    </Cell>
+                  </Row>
+                ))}
+              </Body>
+            </>
+          )}
+        </Table>
+      </Box>
+    );
+  };
+
+  return (
+    <SectionContent id="devices-window">
+      {renderCoreData()}
+      {renderDeviceData()}
+      {renderDeviceDetails()}
+      {selectedDeviceValue && (
+        <DashboardDevicesDialog
+          open={deviceValueDialogOpen}
+          onClose={deviceValueDialogClose}
+          onSave={deviceValueDialogSave}
+          selectedItem={selectedDeviceValue}
+          writeable={
+            selectedDeviceValue.c !== undefined &&
+            !hasMask(selectedDeviceValue.id, DeviceEntityMask.DV_READONLY)
+          }
+          validator={deviceValueItemValidation(selectedDeviceValue)}
+          progress={submitting}
+        />
+      )}
+      <ButtonRow mt={1}>
+        <Button
+          startIcon={<RefreshIcon />}
+          variant="outlined"
+          color="secondary"
+          onClick={refreshData}
+        >
+          {LL.REFRESH()}
+        </Button>
+      </ButtonRow>
+    </SectionContent>
+  );
+};
+
+export default Devices;

interface/src/app/main/DevicesDialog.tsx

@@ -0,0 +1,228 @@
+import { useEffect, useState } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormHelperText,
+  Grid,
+  InputAdornment,
+  MenuItem,
+  TextField,
+  Typography
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
+import { ValidatedTextField } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { numberValue, updateValue } from 'utils';
+import { validate } from 'validators';
+
+import { DeviceValueUOM, DeviceValueUOM_s } from './types';
+import type { DeviceValue } from './types';
+
+interface DashboardDevicesDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (as: DeviceValue) => void;
+  selectedItem: DeviceValue;
+  writeable: boolean;
+  validator: Schema;
+  progress: boolean;
+}
+
+const DevicesDialog = ({
+  open,
+  onClose,
+  onSave,
+  selectedItem,
+  writeable,
+  validator,
+  progress
+}: DashboardDevicesDialogProps) => {
+  const { LL } = useI18nContext();
+  const [editItem, setEditItem] = useState<DeviceValue>(selectedItem);
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
+  const updateFormValue = updateValue(setEditItem);
+
+  useEffect(() => {
+    if (open) {
+      setFieldErrors(undefined);
+      setEditItem(selectedItem);
+    }
+  }, [open, selectedItem]);
+
+  const close = () => {
+    onClose();
+  };
+
+  const save = async () => {
+    try {
+      setFieldErrors(undefined);
+      await validate(validator, editItem);
+      onSave(editItem);
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+  };
+
+  const setUom = (uom: DeviceValueUOM) => {
+    switch (uom) {
+      case DeviceValueUOM.HOURS:
+        return LL.HOURS();
+      case DeviceValueUOM.MINUTES:
+        return LL.MINUTES();
+      case DeviceValueUOM.SECONDS:
+        return LL.SECONDS();
+      default:
+        return DeviceValueUOM_s[uom];
+    }
+  };
+
+  const showHelperText = (dv: DeviceValue) =>
+    dv.h ? (
+      dv.h
+    ) : dv.l ? (
+      dv.l.join(' | ')
+    ) : dv.m !== undefined && dv.x !== undefined ? (
+      <>
+        {dv.m}&nbsp;&rarr;&nbsp;{dv.x}
+      </>
+    ) : undefined;
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={close}>
+      <DialogTitle>
+        {selectedItem.v === '' && selectedItem.c
+          ? LL.RUN_COMMAND()
+          : writeable
+            ? LL.CHANGE_VALUE()
+            : LL.VALUE(0)}
+      </DialogTitle>
+      <DialogContent dividers>
+        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
+          <Typography variant="body2">{editItem.id.slice(2)}</Typography>
+        </Box>
+        <Grid>
+          <Grid item>
+            {editItem.l ? (
+              <TextField
+                name="v"
+                label={LL.VALUE(0)}
+                value={editItem.v}
+                disabled={!writeable}
+                // autoFocus
+                sx={{ width: '30ch' }}
+                select
+                onChange={updateFormValue}
+              >
+                {editItem.l.map((val) => (
+                  <MenuItem value={val} key={val}>
+                    {val}
+                  </MenuItem>
+                ))}
+              </TextField>
+            ) : editItem.s || editItem.u !== DeviceValueUOM.NONE ? (
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="v"
+                label={LL.VALUE(0)}
+                value={numberValue(Math.round((editItem.v as number) * 10) / 10)}
+                autoFocus
+                disabled={!writeable}
+                type="number"
+                sx={{ width: '30ch' }}
+                onChange={updateFormValue}
+                inputProps={
+                  editItem.s
+                    ? { min: editItem.m, max: editItem.x, step: editItem.s }
+                    : {}
+                }
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      {setUom(editItem.u)}
+                    </InputAdornment>
+                  )
+                }}
+              />
+            ) : (
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="v"
+                label={LL.VALUE(0)}
+                value={editItem.v}
+                disabled={!writeable}
+                // autoFocus
+                sx={{ width: '30ch' }}
+                multiline={editItem.u ? false : true}
+                onChange={updateFormValue}
+              />
+            )}
+          </Grid>
+          {writeable && (
+            <Grid item>
+              <FormHelperText>{showHelperText(editItem)}</FormHelperText>
+            </Grid>
+          )}
+        </Grid>
+      </DialogContent>
+
+      <DialogActions>
+        {writeable ? (
+          <Box
+            sx={{
+              '& button, & a, & .MuiCard-root': {
+                mx: 0.6
+              },
+              position: 'relative'
+            }}
+          >
+            <Button
+              startIcon={<CancelIcon />}
+              variant="outlined"
+              onClick={close}
+              color="secondary"
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              variant="contained"
+              onClick={save}
+              color="info"
+            >
+              {selectedItem.v === '' && selectedItem.c ? LL.EXECUTE() : LL.UPDATE()}
+            </Button>
+            {progress && (
+              <CircularProgress
+                size={24}
+                sx={{
+                  color: '#4caf50',
+                  position: 'absolute',
+                  right: '20%',
+                  marginTop: '6px'
+                }}
+              />
+            )}
+          </Box>
+        ) : (
+          <Button variant="outlined" onClick={close} color="secondary">
+            {LL.CLOSE()}
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DevicesDialog;

interface/src/app/main/EntityMaskToggle.tsx

@@ -0,0 +1,103 @@
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+
+import OptionIcon from './OptionIcon';
+import { DeviceEntityMask } from './types';
+import type { DeviceEntity } from './types';
+
+interface EntityMaskToggleProps {
+  onUpdate: (de: DeviceEntity) => void;
+  de: DeviceEntity;
+}
+
+const EntityMaskToggle = ({ onUpdate, de }: EntityMaskToggleProps) => {
+  const getMaskNumber = (newMask: string[]) => {
+    let new_mask = 0;
+    for (const entry of newMask) {
+      new_mask |= Number(entry);
+    }
+    return new_mask;
+  };
+
+  const getMaskString = (m: number) => {
+    const new_masks: string[] = [];
+    if ((m & 1) === 1) {
+      new_masks.push('1');
+    }
+    if ((m & 2) === 2) {
+      new_masks.push('2');
+    }
+    if ((m & 4) === 4) {
+      new_masks.push('4');
+    }
+    if ((m & 8) === 8) {
+      new_masks.push('8');
+    }
+    if ((m & 128) === 128) {
+      new_masks.push('128');
+    }
+    return new_masks;
+  };
+
+  return (
+    <ToggleButtonGroup
+      size="small"
+      color="secondary"
+      value={getMaskString(de.m)}
+      onChange={(event, mask: string[]) => {
+        de.m = getMaskNumber(mask);
+        if (de.n === '' && de.m & DeviceEntityMask.DV_READONLY) {
+          de.m = de.m | DeviceEntityMask.DV_WEB_EXCLUDE;
+        }
+        if (de.m & DeviceEntityMask.DV_WEB_EXCLUDE) {
+          de.m = de.m & ~DeviceEntityMask.DV_FAVORITE;
+        }
+        onUpdate(de);
+      }}
+    >
+      <ToggleButton value="8" disabled={(de.m & 0x81) !== 0 || de.n === undefined}>
+        <OptionIcon
+          type="favorite"
+          isSet={
+            (de.m & DeviceEntityMask.DV_FAVORITE) === DeviceEntityMask.DV_FAVORITE
+          }
+        />
+      </ToggleButton>
+      <ToggleButton value="4" disabled={!de.w || (de.m & 0x83) >= 3}>
+        <OptionIcon
+          type="readonly"
+          isSet={
+            (de.m & DeviceEntityMask.DV_READONLY) === DeviceEntityMask.DV_READONLY
+          }
+        />
+      </ToggleButton>
+      <ToggleButton value="2" disabled={de.n === '' || (de.m & 0x80) !== 0}>
+        <OptionIcon
+          type="api_mqtt_exclude"
+          isSet={
+            (de.m & DeviceEntityMask.DV_API_MQTT_EXCLUDE) ===
+            DeviceEntityMask.DV_API_MQTT_EXCLUDE
+          }
+        />
+      </ToggleButton>
+      <ToggleButton value="1" disabled={de.n === undefined || (de.m & 0x80) !== 0}>
+        <OptionIcon
+          type="web_exclude"
+          isSet={
+            (de.m & DeviceEntityMask.DV_WEB_EXCLUDE) ===
+            DeviceEntityMask.DV_WEB_EXCLUDE
+          }
+        />
+      </ToggleButton>
+      <ToggleButton value="128">
+        <OptionIcon
+          type="deleted"
+          isSet={
+            (de.m & DeviceEntityMask.DV_DELETED) === DeviceEntityMask.DV_DELETED
+          }
+        />
+      </ToggleButton>
+    </ToggleButtonGroup>
+  );
+};
+
+export default EntityMaskToggle;

interface/src/app/main/Help.tsx

@@ -0,0 +1,145 @@
+import type { FC } from 'react';
+import { toast } from 'react-toastify';
+
+import CommentIcon from '@mui/icons-material/CommentTwoTone';
+import DownloadIcon from '@mui/icons-material/GetApp';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import MenuBookIcon from '@mui/icons-material/MenuBookTwoTone';
+import {
+  Avatar,
+  Box,
+  Button,
+  Link,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+  Typography
+} from '@mui/material';
+
+import * as EMSESP from 'app/main/api';
+import { useRequest } from 'alova';
+import { SectionContent, useLayoutTitle } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import type { APIcall } from './types';
+
+const Help: FC = () => {
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.HELP_OF(''));
+
+  const { send: getAPI, onSuccess: onGetAPI } = useRequest(
+    (data: APIcall) => EMSESP.API(data),
+    {
+      immediate: false
+    }
+  );
+
+  onGetAPI((event) => {
+    const anchor = document.createElement('a');
+    anchor.href = URL.createObjectURL(
+      new Blob([JSON.stringify(event.data, null, 2)], {
+        type: 'text/plain'
+      })
+    );
+
+    anchor.download =
+      'emsesp_' + event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt';
+    anchor.click();
+    URL.revokeObjectURL(anchor.href);
+    toast.info(LL.DOWNLOAD_SUCCESSFUL());
+  });
+
+  const callAPI = async (device: string, entity: string) => {
+    await getAPI({ device, entity, id: 0 }).catch((error: Error) => {
+      toast.error(error.message);
+    });
+  };
+
+  return (
+    <SectionContent>
+      <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
+        <ListItem>
+          <ListItemButton component="a" href="https://emsesp.github.io/docs">
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#72caf9' }}>
+                <MenuBookIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.HELP_INFORMATION_1()} />
+          </ListItemButton>
+        </ListItem>
+
+        <ListItem>
+          <ListItemButton component="a" href="https://discord.gg/3J3GgnzpyT">
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#72caf9' }}>
+                <CommentIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.HELP_INFORMATION_2()} />
+          </ListItemButton>
+        </ListItem>
+
+        <ListItem>
+          <ListItemButton
+            component="a"
+            href="https://github.com/emsesp/EMS-ESP32/issues/new/choose"
+          >
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#72caf9' }}>
+                <GitHubIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.HELP_INFORMATION_3()} />
+          </ListItemButton>
+        </ListItem>
+      </List>
+
+      <Box p={2} color="warning.main">
+        <Typography mb={1} variant="body2">
+          {LL.HELP_INFORMATION_4()}
+        </Typography>
+        <Button
+          startIcon={<DownloadIcon />}
+          variant="outlined"
+          color="primary"
+          onClick={() => callAPI('system', 'info')}
+        >
+          {LL.SUPPORT_INFORMATION(0)}
+        </Button>
+      </Box>
+
+      <Button
+        sx={{ ml: 2 }}
+        startIcon={<DownloadIcon />}
+        variant="outlined"
+        color="primary"
+        onClick={() => callAPI('system', 'allvalues')}
+      >
+        All Values
+      </Button>
+
+      <Box border={1} p={1} mt={4}>
+        <Typography align="center" variant="subtitle1" color="orange">
+          <b>{LL.HELP_INFORMATION_5()}</b>
+        </Typography>
+        <Typography align="center">
+          <Link
+            target="_blank"
+            href="https://github.com/emsesp/EMS-ESP32"
+            color="primary"
+          >
+            {'github.com/emsesp/EMS-ESP32'}
+          </Link>
+        </Typography>
+        <Typography color="white" variant="subtitle2" align="center">
+          @proddy @MichaelDvP
+        </Typography>
+      </Box>
+    </SectionContent>
+  );
+};
+
+export default Help;

interface/src/app/main/Modules.tsx

@@ -0,0 +1,271 @@
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+import { useBlocker } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import CircleIcon from '@mui/icons-material/Circle';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Box, Button, Typography } from '@mui/material';
+
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { updateState, useRequest } from 'alova';
+import {
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import * as EMSESP from './api';
+import ModulesDialog from './ModulesDialog';
+import type { ModuleItem, Modules } from './types';
+
+const Modules: FC = () => {
+  const { LL } = useI18nContext();
+  const [numChanges, setNumChanges] = useState<number>(0);
+  const blocker = useBlocker(numChanges !== 0);
+
+  const [selectedModuleItem, setSelectedModuleItem] = useState<ModuleItem>();
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  const {
+    data: modules,
+    send: fetchModules,
+    error
+  } = useRequest(EMSESP.readModules, {
+    initialData: []
+  });
+
+  const { send: writeModules } = useRequest(
+    (data: { key: string; enabled: boolean; license: string }) =>
+      EMSESP.writeModules(data),
+    {
+      immediate: false
+    }
+  );
+
+  const modules_theme = useTheme({
+    Table: `
+      --data-table-library_grid-template-columns: 48px 180px 120px 100px repeat(1, minmax(160px, 1fr)) 180px;
+    `,
+    BaseRow: `
+      font-size: 14px;
+      .td {
+        height: 32px;
+      }
+    `,
+    BaseCell: `
+      &:nth-of-type(1) {
+        text-align: center;
+      }
+    `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        border-bottom: 1px solid #565656;
+        height: 36px;
+      }
+    `,
+    Row: `
+      background-color: #1e1e1e;
+      position: relative;
+      cursor: pointer;
+      .td {
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+      }
+      &:hover .td {
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+      }
+      &:nth-of-type(odd) .td {
+        background-color: #303030;
+      }
+    `
+  });
+
+  const onDialogClose = () => {
+    setDialogOpen(false);
+  };
+
+  const onDialogSave = (updatedItem: ModuleItem) => {
+    setDialogOpen(false);
+    updateModuleItem(updatedItem);
+  };
+
+  const editModuleItem = useCallback((mi: ModuleItem) => {
+    setSelectedModuleItem(mi);
+    setDialogOpen(true);
+  }, []);
+
+  const onCancel = async () => {
+    await fetchModules().then(() => {
+      setNumChanges(0);
+    });
+  };
+
+  function hasModulesChanged(mi: ModuleItem) {
+    return mi.enabled !== mi.o_enabled || mi.license !== mi.o_license;
+  }
+
+  const updateModuleItem = (updatedItem: ModuleItem) => {
+    updateState('modules', (data: ModuleItem[]) => {
+      const new_data = data.map((mi) =>
+        mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
+      );
+      setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
+      return new_data;
+    });
+  };
+
+  const saveModules = async () => {
+    await writeModules({
+      modules: modules.map((condensed_mi) => ({
+        key: condensed_mi.key,
+        enabled: condensed_mi.enabled,
+        license: condensed_mi.license
+      }))
+    })
+      .then(() => {
+        toast.success(LL.MODULES_UPDATED());
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(async () => {
+        await fetchModules();
+        setNumChanges(0);
+      });
+  };
+
+  const renderContent = () => {
+    if (!modules) {
+      return <FormLoader onRetry={fetchModules} errorMessage={error?.message} />;
+    }
+
+    useLayoutTitle(LL.MODULES());
+
+    if (modules.length === 0) {
+      return (
+        <Typography variant="body2" color="error">
+          {LL.MODULES_NONE()}
+        </Typography>
+      );
+    }
+
+    const colorStatus = (status: number) => {
+      if (status === 1) {
+        return <div style={{ color: 'red' }}>Pending Activation</div>;
+      }
+      return <div style={{ color: '#00FF7F' }}>Activated</div>;
+    };
+
+    return (
+      <>
+        <Box mb={2} color="warning.main">
+          <Typography variant="body2">{LL.MODULES_DESCRIPTION()}</Typography>
+        </Box>
+        <Table
+          data={{ nodes: modules }}
+          theme={modules_theme}
+          layout={{ custom: true }}
+        >
+          {(tableList: ModuleItem[]) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCell />
+                  <HeaderCell>{LL.NAME(0)}</HeaderCell>
+                  <HeaderCell>Author</HeaderCell>
+                  <HeaderCell>{LL.VERSION()}</HeaderCell>
+                  <HeaderCell>Message</HeaderCell>
+                  <HeaderCell>{LL.STATUS_OF('')}</HeaderCell>
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((mi: ModuleItem) => (
+                  <Row key={mi.id} item={mi} onClick={() => editModuleItem(mi)}>
+                    <Cell stiff>
+                      {mi.enabled ? (
+                        <CircleIcon
+                          color="success"
+                          sx={{ fontSize: 16, verticalAlign: 'middle' }}
+                        />
+                      ) : (
+                        <CircleIcon
+                          color="error"
+                          sx={{ fontSize: 16, verticalAlign: 'middle' }}
+                        />
+                      )}
+                    </Cell>
+                    <Cell>{mi.name}</Cell>
+                    <Cell>{mi.author}</Cell>
+                    <Cell>{mi.version}</Cell>
+                    <Cell>{mi.message}</Cell>
+                    <Cell>{colorStatus(mi.status)}</Cell>
+                  </Row>
+                ))}
+              </Body>
+            </>
+          )}
+        </Table>
+
+        <Box mt={1} display="flex" flexWrap="wrap">
+          <Box flexGrow={1}>
+            {numChanges !== 0 && (
+              <ButtonRow>
+                <Button
+                  startIcon={<CancelIcon />}
+                  variant="outlined"
+                  onClick={onCancel}
+                  color="secondary"
+                >
+                  {LL.CANCEL()}
+                </Button>
+                <Button
+                  startIcon={<WarningIcon color="warning" />}
+                  variant="contained"
+                  color="info"
+                  onClick={saveModules}
+                >
+                  {LL.APPLY_CHANGES(numChanges)}
+                </Button>
+              </ButtonRow>
+            )}
+          </Box>
+        </Box>
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {renderContent()}
+      {selectedModuleItem && (
+        <ModulesDialog
+          open={dialogOpen}
+          onClose={onDialogClose}
+          onSave={onDialogSave}
+          selectedItem={selectedModuleItem}
+        />
+      )}
+    </SectionContent>
+  );
+};
+
+export default Modules;

interface/src/app/main/ModulesDialog.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import DoneIcon from '@mui/icons-material/Done';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  TextField
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import { BlockFormControlLabel } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { updateValue } from 'utils';
+
+import type { ModuleItem } from './types';
+
+interface ModulesDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (mi: ModuleItem) => void;
+  selectedItem: ModuleItem;
+}
+
+const ModulesDialog = ({
+  open,
+  onClose,
+  onSave,
+  selectedItem
+}: ModulesDialogProps) => {
+  const { LL } = useI18nContext();
+  const [editItem, setEditItem] = useState<ModuleItem>(selectedItem);
+
+  const updateFormValue = updateValue(setEditItem);
+
+  useEffect(() => {
+    if (open) {
+      setEditItem(selectedItem);
+    }
+  }, [open, selectedItem]);
+
+  const close = () => {
+    onClose();
+  };
+
+  const save = () => {
+    onSave(editItem);
+  };
+
+  return (
+    <Dialog sx={dialogStyle} fullWidth maxWidth="xs" open={open} onClose={onClose}>
+      <DialogTitle>{LL.EDIT() + ' ' + editItem.key}</DialogTitle>
+      <DialogContent dividers>
+        <Grid container>
+          <BlockFormControlLabel
+            control={
+              <Checkbox
+                checked={editItem.enabled}
+                onChange={updateFormValue}
+                name="enabled"
+              />
+            }
+            label="Enabled"
+          />
+        </Grid>
+        <Box mt={2} mb={1}>
+          <TextField
+            name="license"
+            label="License Key"
+            multiline
+            rows={6}
+            fullWidth
+            value={editItem.license}
+            onChange={updateFormValue}
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={close}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<DoneIcon />}
+          variant="outlined"
+          onClick={save}
+          color="primary"
+        >
+          {LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ModulesDialog;

interface/src/app/main/OptionIcon.tsx

@@ -0,0 +1,49 @@
+import type { FC } from 'react';
+
+import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import InsertCommentOutlinedIcon from '@mui/icons-material/InsertCommentOutlined';
+import StarIcon from '@mui/icons-material/Star';
+import StarOutlineIcon from '@mui/icons-material/StarOutline';
+import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import type { SvgIconProps } from '@mui/material';
+
+type OptionType =
+  | 'deleted'
+  | 'readonly'
+  | 'web_exclude'
+  | 'api_mqtt_exclude'
+  | 'favorite';
+
+const OPTION_ICONS: {
+  [type in OptionType]: [
+    React.ComponentType<SvgIconProps>,
+    React.ComponentType<SvgIconProps>
+  ];
+} = {
+  deleted: [DeleteForeverIcon, DeleteOutlineIcon],
+  readonly: [EditOffOutlinedIcon, EditOutlinedIcon],
+  web_exclude: [VisibilityOffOutlinedIcon, VisibilityOutlinedIcon],
+  api_mqtt_exclude: [CommentsDisabledOutlinedIcon, InsertCommentOutlinedIcon],
+  favorite: [StarIcon, StarOutlineIcon]
+};
+
+interface OptionIconProps {
+  type: OptionType;
+  isSet: boolean;
+}
+
+const OptionIcon: FC<OptionIconProps> = ({ type, isSet }) => {
+  const Icon = OPTION_ICONS[type][isSet ? 0 : 1];
+  return isSet ? (
+    <Icon color="primary" sx={{ fontSize: 16, verticalAlign: 'middle' }} />
+  ) : (
+    <Icon sx={{ fontSize: 16, verticalAlign: 'middle' }} />
+  );
+};
+
+export default OptionIcon;

interface/src/app/main/Scheduler.tsx

@@ -0,0 +1,375 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { FC } from 'react';
+import { useBlocker } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import AddIcon from '@mui/icons-material/Add';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CircleIcon from '@mui/icons-material/Circle';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Box, Button, Divider, Stack, Typography } from '@mui/material';
+
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { updateState, useRequest } from 'alova';
+import {
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import * as EMSESP from './api';
+import SettingsSchedulerDialog from './SchedulerDialog';
+import { ScheduleFlag } from './types';
+import type { Schedule, ScheduleItem } from './types';
+import { schedulerItemValidation } from './validators';
+
+const Scheduler: FC = () => {
+  const { LL, locale } = useI18nContext();
+  const [numChanges, setNumChanges] = useState<number>(0);
+  const blocker = useBlocker(numChanges !== 0);
+  const [selectedScheduleItem, setSelectedScheduleItem] = useState<ScheduleItem>();
+  const [dow, setDow] = useState<string[]>([]);
+  const [creating, setCreating] = useState<boolean>(false);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  const {
+    data: schedule,
+    send: fetchSchedule,
+    error
+  } = useRequest(EMSESP.readSchedule, {
+    initialData: [],
+    force: true
+  });
+
+  const { send: writeSchedule } = useRequest(
+    (data: Schedule) => EMSESP.writeSchedule(data),
+    {
+      immediate: false
+    }
+  );
+
+  function hasScheduleChanged(si: ScheduleItem) {
+    return (
+      si.id !== si.o_id ||
+      (si.name || '') !== (si.o_name || '') ||
+      si.active !== si.o_active ||
+      si.deleted !== si.o_deleted ||
+      si.flags !== si.o_flags ||
+      si.time !== si.o_time ||
+      si.cmd !== si.o_cmd ||
+      si.value !== si.o_value
+    );
+  }
+
+  useEffect(() => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+      weekday: 'short',
+      timeZone: 'UTC'
+    });
+    const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {
+      const dd = day < 10 ? `0${day}` : day;
+      return new Date(`2017-01-${dd}T00:00:00+00:00`);
+    });
+    setDow(days.map((date) => formatter.format(date)));
+  }, [locale]);
+
+  const schedule_theme = useTheme({
+    Table: `
+      --data-table-library_grid-template-columns: 36px 210px 100px 192px repeat(1, minmax(100px, 1fr)) 160px;
+    `,
+    BaseRow: `
+      font-size: 14px;
+      .td {
+        height: 32px;
+      }
+    `,
+    BaseCell: `
+      &:nth-of-type(2) {
+        text-align: center;
+      }
+      &:nth-of-type(1) {
+        text-align: center;
+      }
+    `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        border-bottom: 1px solid #565656;
+        height: 36px;
+      }
+    `,
+    Row: `
+      background-color: #1e1e1e;
+      position: relative;
+      cursor: pointer;
+      .td {
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+      }
+      &:hover .td {
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+      }
+      &:nth-of-type(odd) .td {
+        background-color: #303030;
+      }
+    `
+  });
+
+  const saveSchedule = async () => {
+    await writeSchedule({
+      schedule: schedule
+        .filter((si) => !si.deleted)
+        .map((condensed_si) => ({
+          id: condensed_si.id,
+          active: condensed_si.active,
+          flags: condensed_si.flags,
+          time: condensed_si.time,
+          cmd: condensed_si.cmd,
+          value: condensed_si.value,
+          name: condensed_si.name
+        }))
+    })
+      .then(() => {
+        toast.success(LL.SCHEDULE_UPDATED());
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(async () => {
+        await fetchSchedule();
+        setNumChanges(0);
+      });
+  };
+
+  const editScheduleItem = useCallback((si: ScheduleItem) => {
+    setCreating(false);
+    setSelectedScheduleItem(si);
+    setDialogOpen(true);
+  }, []);
+
+  const onDialogClose = () => {
+    setDialogOpen(false);
+  };
+
+  const onDialogCancel = async () => {
+    await fetchSchedule().then(() => {
+      setNumChanges(0);
+    });
+  };
+
+  const onDialogSave = (updatedItem: ScheduleItem) => {
+    setDialogOpen(false);
+
+    updateState('schedule', (data: ScheduleItem[]) => {
+      const new_data = creating
+        ? [
+            ...data.filter((si) => creating || si.o_id !== updatedItem.o_id),
+            updatedItem
+          ]
+        : data.map((si) =>
+            si.id === updatedItem.id ? { ...si, ...updatedItem } : si
+          );
+
+      setNumChanges(new_data.filter((si) => hasScheduleChanged(si)).length);
+
+      return new_data;
+    });
+  };
+
+  const addScheduleItem = () => {
+    setCreating(true);
+    setSelectedScheduleItem({
+      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
+      active: false,
+      deleted: false,
+      flags: 0,
+      time: '',
+      cmd: '',
+      value: '',
+      name: ''
+    });
+    setDialogOpen(true);
+  };
+
+  const renderSchedule = () => {
+    if (!schedule) {
+      return <FormLoader onRetry={fetchSchedule} errorMessage={error?.message} />;
+    }
+
+    const dayBox = (si: ScheduleItem, flag: number) => (
+      <>
+        <Box>
+          <Typography
+            sx={{ fontSize: 11 }}
+            color={
+              si.flags >= ScheduleFlag.SCHEDULE_TIMER && si.flags !== flag
+                ? 'gray'
+                : (si.flags & flag) === flag
+                  ? 'primary'
+                  : 'grey'
+            }
+          >
+            {flag === ScheduleFlag.SCHEDULE_TIMER
+              ? LL.TIMER(0)
+              : flag === ScheduleFlag.SCHEDULE_ONCHANGE
+                ? 'On Change'
+                : flag === ScheduleFlag.SCHEDULE_CONDITION
+                  ? 'Condition'
+                  : dow[Math.log(flag) / Math.log(2)]}
+          </Typography>
+        </Box>
+        <Divider orientation="vertical" flexItem />
+      </>
+    );
+
+    useLayoutTitle(LL.SCHEDULER());
+
+    return (
+      <Table
+        data={{
+          nodes: schedule
+            .filter((si) => !si.deleted)
+            .sort((a, b) => a.flags - b.flags)
+        }}
+        theme={schedule_theme}
+        layout={{ custom: true }}
+      >
+        {(tableList: ScheduleItem[]) => (
+          <>
+            <Header>
+              <HeaderRow>
+                <HeaderCell />
+                <HeaderCell stiff>{LL.SCHEDULE(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.TIME(0)}/Cond.</HeaderCell>
+                <HeaderCell stiff>{LL.COMMAND(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.VALUE(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.NAME(0)}</HeaderCell>
+              </HeaderRow>
+            </Header>
+            <Body>
+              {tableList.map((si: ScheduleItem) => (
+                <Row key={si.id} item={si} onClick={() => editScheduleItem(si)}>
+                  <Cell stiff>
+                    {si.active ? (
+                      <CircleIcon
+                        color="success"
+                        sx={{ fontSize: 16, verticalAlign: 'middle' }}
+                      />
+                    ) : (
+                      <CircleIcon
+                        color="error"
+                        sx={{ fontSize: 16, verticalAlign: 'middle' }}
+                      />
+                    )}
+                  </Cell>
+                  <Cell stiff>
+                    <Stack spacing={0.5} direction="row">
+                      <Divider orientation="vertical" flexItem />
+                      {si.flags < ScheduleFlag.SCHEDULE_TIMER ? (
+                        <>
+                          {dayBox(si, ScheduleFlag.SCHEDULE_MON)}
+                          {dayBox(si, ScheduleFlag.SCHEDULE_TUE)}
+                          {dayBox(si, ScheduleFlag.SCHEDULE_WED)}
+                          {dayBox(si, ScheduleFlag.SCHEDULE_THU)}
+                          {dayBox(si, ScheduleFlag.SCHEDULE_FRI)}
+                          {dayBox(si, ScheduleFlag.SCHEDULE_SAT)}
+                          {dayBox(si, ScheduleFlag.SCHEDULE_SUN)}
+                        </>
+                      ) : (
+                        <>
+                          {dayBox(si, ScheduleFlag.SCHEDULE_TIMER)}
+                          {dayBox(si, ScheduleFlag.SCHEDULE_ONCHANGE)}
+                          {dayBox(si, ScheduleFlag.SCHEDULE_CONDITION)}
+                        </>
+                      )}
+                    </Stack>
+                  </Cell>
+                  <Cell>{si.time}</Cell>
+                  <Cell>{si.cmd}</Cell>
+                  <Cell>{si.value}</Cell>
+                  <Cell>{si.name}</Cell>
+                </Row>
+              ))}
+            </Body>
+          </>
+        )}
+      </Table>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      <Box mb={2} color="warning.main">
+        <Typography variant="body2">{LL.SCHEDULER_HELP_1()}</Typography>
+      </Box>
+      {renderSchedule()}
+
+      {selectedScheduleItem && (
+        <SettingsSchedulerDialog
+          open={dialogOpen}
+          creating={creating}
+          onClose={onDialogClose}
+          onSave={onDialogSave}
+          selectedItem={selectedScheduleItem}
+          validator={schedulerItemValidation(schedule, selectedScheduleItem)}
+          dow={dow}
+        />
+      )}
+
+      <Box mt={1} display="flex" flexWrap="wrap">
+        <Box flexGrow={1}>
+          {numChanges !== 0 && (
+            <ButtonRow>
+              <Button
+                startIcon={<CancelIcon />}
+                variant="outlined"
+                onClick={onDialogCancel}
+                color="secondary"
+              >
+                {LL.CANCEL()}
+              </Button>
+              <Button
+                startIcon={<WarningIcon color="warning" />}
+                variant="contained"
+                color="info"
+                onClick={saveSchedule}
+              >
+                {LL.APPLY_CHANGES(numChanges)}
+              </Button>
+            </ButtonRow>
+          )}
+        </Box>
+        <Box flexWrap="nowrap" whiteSpace="nowrap">
+          <ButtonRow>
+            <Button
+              startIcon={<AddIcon />}
+              variant="outlined"
+              color="primary"
+              onClick={addScheduleItem}
+            >
+              {LL.ADD(0)}
+            </Button>
+          </ButtonRow>
+        </Box>
+      </Box>
+    </SectionContent>
+  );
+};
+
+export default Scheduler;

interface/src/app/main/SchedulerDialog.tsx

@@ -0,0 +1,394 @@
+import { useEffect, useState } from 'react';
+
+import AddIcon from '@mui/icons-material/Add';
+import CancelIcon from '@mui/icons-material/Cancel';
+import DoneIcon from '@mui/icons-material/Done';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
+import { BlockFormControlLabel, ValidatedTextField } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { updateValue } from 'utils';
+import { validate } from 'validators';
+
+import { ScheduleFlag } from './types';
+import type { ScheduleItem } from './types';
+
+interface SchedulerDialogProps {
+  open: boolean;
+  creating: boolean;
+  onClose: () => void;
+  onSave: (ei: ScheduleItem) => void;
+  selectedItem: ScheduleItem;
+  validator: Schema;
+  dow: string[];
+}
+
+const SchedulerDialog = ({
+  open,
+  creating,
+  onClose,
+  onSave,
+  selectedItem,
+  validator,
+  dow
+}: SchedulerDialogProps) => {
+  const { LL } = useI18nContext();
+  const [editItem, setEditItem] = useState<ScheduleItem>(selectedItem);
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
+  const updateFormValue = updateValue(setEditItem);
+
+  useEffect(() => {
+    if (open) {
+      setFieldErrors(undefined);
+      setEditItem(selectedItem);
+    }
+  }, [open, selectedItem]);
+
+  const save = async () => {
+    try {
+      setFieldErrors(undefined);
+      await validate(validator, editItem);
+      onSave(editItem);
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+  };
+
+  const remove = () => {
+    editItem.deleted = true;
+    onSave(editItem);
+  };
+
+  const getFlagNumber = (newFlag: string[]) => {
+    let new_flag = 0;
+    for (const entry of newFlag) {
+      new_flag |= Number(entry);
+    }
+    return new_flag;
+  };
+
+  const getFlagString = (f: number) => {
+    const new_flags: string[] = [];
+    if ((f & 129) === 1) {
+      new_flags.push('1');
+    }
+    if ((f & 130) === 2) {
+      new_flags.push('2');
+    }
+    if ((f & 4) === 4) {
+      new_flags.push('4');
+    }
+    if ((f & 8) === 8) {
+      new_flags.push('8');
+    }
+    if ((f & 16) === 16) {
+      new_flags.push('16');
+    }
+    if ((f & 32) === 32) {
+      new_flags.push('32');
+    }
+    if ((f & 64) === 64) {
+      new_flags.push('64');
+    }
+    if ((f & 131) === 128) {
+      new_flags.push('128');
+    }
+    if ((f & 131) === 129) {
+      new_flags.push('129');
+    }
+    if ((f & 131) === 130) {
+      new_flags.push('130');
+    }
+    return new_flags;
+  };
+
+  const isTimer = editItem.flags === ScheduleFlag.SCHEDULE_TIMER;
+  const isCondition = editItem.flags === ScheduleFlag.SCHEDULE_CONDITION;
+  const isOnChange = editItem.flags === ScheduleFlag.SCHEDULE_ONCHANGE;
+
+  const showFlag = (si: ScheduleItem, flag: number) => (
+    <Typography
+      variant="button"
+      sx={{ fontSize: 10 }}
+      color={
+        (isOnChange && flag !== ScheduleFlag.SCHEDULE_ONCHANGE) ||
+        (isCondition && flag !== ScheduleFlag.SCHEDULE_CONDITION)
+          ? 'grey'
+          : (si.flags & flag) === flag
+            ? 'primary'
+            : 'grey'
+      }
+    >
+      {flag === ScheduleFlag.SCHEDULE_TIMER
+        ? LL.TIMER(0)
+        : flag === ScheduleFlag.SCHEDULE_ONCHANGE
+          ? 'On Change'
+          : flag === ScheduleFlag.SCHEDULE_CONDITION
+            ? 'Condition'
+            : dow[Math.log(flag) / Math.log(2)]}
+    </Typography>
+  );
+
+  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
+      <DialogTitle>
+        {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
+        {LL.SCHEDULE(1)}
+      </DialogTitle>
+      <DialogContent dividers>
+        <Box display="flex" flexWrap="wrap" mb={1}>
+          <Box>
+            <ToggleButtonGroup
+              size="small"
+              color="secondary"
+              value={getFlagString(editItem.flags)}
+              onChange={(_event, flag: string[]) => {
+                setEditItem({ ...editItem, flags: getFlagNumber(flag) & 127 });
+              }}
+            >
+              <ToggleButton value="2">
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_MON)}
+              </ToggleButton>
+              <ToggleButton value="4">
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_TUE)}
+              </ToggleButton>
+              <ToggleButton value="8">
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_WED)}
+              </ToggleButton>
+              <ToggleButton value="16">
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_THU)}
+              </ToggleButton>
+              <ToggleButton value="32">
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_FRI)}
+              </ToggleButton>
+              <ToggleButton value="64">
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_SAT)}
+              </ToggleButton>
+              <ToggleButton value="1">
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_SUN)}
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Box>
+          <Box sx={{ '& button, & a, & .MuiCard-root': { ml: 1 } }}>
+            {isTimer ? (
+              <Button
+                size="large"
+                sx={{ bgcolor: '#334f65' }}
+                variant="contained"
+                onClick={() => {
+                  setEditItem({ ...editItem, flags: ScheduleFlag.SCHEDULE_TIMER });
+                }}
+              >
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_TIMER)}
+              </Button>
+            ) : (
+              <Button
+                size="large"
+                variant="outlined"
+                onClick={() => {
+                  setEditItem({
+                    ...editItem,
+                    flags: ScheduleFlag.SCHEDULE_TIMER
+                  });
+                }}
+              >
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_TIMER)}
+              </Button>
+            )}
+            {isOnChange ? (
+              <Button
+                size="large"
+                sx={{ bgcolor: '#334f65' }}
+                variant="contained"
+                onClick={() => {
+                  setEditItem({
+                    ...editItem,
+                    flags: ScheduleFlag.SCHEDULE_ONCHANGE
+                  });
+                }}
+              >
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_ONCHANGE)}
+              </Button>
+            ) : (
+              <Button
+                size="large"
+                variant="outlined"
+                onClick={() => {
+                  setEditItem({
+                    ...editItem,
+                    flags: ScheduleFlag.SCHEDULE_ONCHANGE
+                  });
+                }}
+              >
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_ONCHANGE)}
+              </Button>
+            )}
+            {isCondition ? (
+              <Button
+                size="large"
+                sx={{ bgcolor: '#334f65' }}
+                variant="contained"
+                onClick={() => {
+                  setEditItem({
+                    ...editItem,
+                    flags: ScheduleFlag.SCHEDULE_CONDITION
+                  });
+                }}
+              >
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_CONDITION)}
+              </Button>
+            ) : (
+              <Button
+                size="large"
+                variant="outlined"
+                onClick={() => {
+                  setEditItem({
+                    ...editItem,
+                    flags: ScheduleFlag.SCHEDULE_CONDITION
+                  });
+                }}
+              >
+                {showFlag(editItem, ScheduleFlag.SCHEDULE_CONDITION)}
+              </Button>
+            )}
+          </Box>
+        </Box>
+        {editItem.flags !== 0 && (
+          <>
+            <Grid container>
+              <BlockFormControlLabel
+                control={
+                  <Checkbox
+                    checked={editItem.active}
+                    onChange={updateFormValue}
+                    name="active"
+                  />
+                }
+                label={LL.ACTIVE()}
+              />
+            </Grid>
+            <Grid container>
+              {isCondition || isOnChange ? (
+                <TextField
+                  name="time"
+                  label={isCondition ? 'Condition' : 'On Change Value'}
+                  multiline
+                  fullWidth
+                  value={
+                    editItem.time == '00:00' ? (editItem.time = '') : editItem.time
+                  }
+                  margin="normal"
+                  onChange={updateFormValue}
+                />
+              ) : (
+                <>
+                  <TextField
+                    name="time"
+                    type="time"
+                    label={isTimer ? LL.TIMER(1) : LL.TIME(1)}
+                    value={
+                      editItem.time == '' ? (editItem.time = '00:00') : editItem.time
+                    }
+                    margin="normal"
+                    onChange={updateFormValue}
+                  />
+                  {isTimer && (
+                    <Box color="warning.main" ml={2} mt={4}>
+                      <Typography variant="body2">
+                        {LL.SCHEDULER_HELP_2()}
+                      </Typography>
+                    </Box>
+                  )}
+                </>
+              )}
+            </Grid>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="cmd"
+              label={LL.COMMAND(0)}
+              multiline
+              fullWidth
+              value={editItem.cmd}
+              margin="normal"
+              onChange={updateFormValue}
+            />
+            <TextField
+              name="value"
+              label={LL.VALUE(0)}
+              multiline
+              margin="normal"
+              fullWidth
+              value={editItem.value}
+              onChange={updateFormValue}
+            />
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="name"
+              label={LL.NAME(0) + ' (' + LL.OPTIONAL() + ')'}
+              value={editItem.name}
+              fullWidth
+              margin="normal"
+              onChange={updateFormValue}
+            />
+          </>
+        )}
+      </DialogContent>
+      <DialogActions>
+        {!creating && (
+          <Box flexGrow={1}>
+            <Button
+              startIcon={<RemoveIcon />}
+              variant="outlined"
+              color="warning"
+              onClick={remove}
+            >
+              {LL.REMOVE()}
+            </Button>
+          </Box>
+        )}
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={creating ? <AddIcon /> : <DoneIcon />}
+          variant="outlined"
+          onClick={save}
+          color="primary"
+        >
+          {creating ? LL.ADD(0) : LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default SchedulerDialog;

interface/src/app/main/Sensors.tsx

@@ -0,0 +1,521 @@
+import { useContext, useEffect, useState } from 'react';
+import type { FC } from 'react';
+import { toast } from 'react-toastify';
+
+import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
+import { Box, Button, Typography } from '@mui/material';
+
+import { SortToggleType, useSort } from '@table-library/react-table-library/sort';
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import type { State } from '@table-library/react-table-library/types/common';
+import { useRequest } from 'alova';
+import { ButtonRow, SectionContent, useLayoutTitle } from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import * as EMSESP from './api';
+import DashboardSensorsAnalogDialog from './SensorsAnalogDialog';
+import DashboardSensorsTemperatureDialog from './SensorsTemperatureDialog';
+import {
+  AnalogType,
+  AnalogTypeNames,
+  DeviceValueUOM,
+  DeviceValueUOM_s
+} from './types';
+import type {
+  AnalogSensor,
+  TemperatureSensor,
+  WriteAnalogSensor,
+  WriteTemperatureSensor
+} from './types';
+import {
+  analogSensorItemValidation,
+  temperatureSensorItemValidation
+} from './validators';
+
+const Sensors: FC = () => {
+  const { LL } = useI18nContext();
+  const { me } = useContext(AuthenticatedContext);
+
+  const [selectedTemperatureSensor, setSelectedTemperatureSensor] =
+    useState<TemperatureSensor>();
+  const [selectedAnalogSensor, setSelectedAnalogSensor] = useState<AnalogSensor>();
+  const [temperatureDialogOpen, setTemperatureDialogOpen] = useState<boolean>(false);
+  const [analogDialogOpen, setAnalogDialogOpen] = useState<boolean>(false);
+  const [creating, setCreating] = useState<boolean>(false);
+
+  const { data: sensorData, send: fetchSensorData } = useRequest(
+    () => EMSESP.readSensorData(),
+    {
+      initialData: {
+        ts: [],
+        as: [],
+        analog_enabled: false,
+        platform: 'ESP32'
+      }
+    }
+  );
+
+  const { send: writeTemperatureSensor } = useRequest(
+    (data: WriteTemperatureSensor) => EMSESP.writeTemperatureSensor(data),
+    {
+      immediate: false
+    }
+  );
+
+  const { send: writeAnalogSensor } = useRequest(
+    (data: WriteAnalogSensor) => EMSESP.writeAnalogSensor(data),
+    {
+      immediate: false
+    }
+  );
+
+  const common_theme = useTheme({
+    BaseRow: `
+      font-size: 14px;
+      .td {
+        height: 32px;
+      }
+    `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        border-bottom: 1px solid #565656;
+      }
+      .th {
+        height: 36px;
+      }
+    `,
+    Row: `
+      background-color: #1e1e1e;
+      position: relative;
+      cursor: pointer;
+      .td {
+        padding: 8px;
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+      }
+      &.tr.tr-body.row-select.row-select-single-selected {
+        background-color: #3d4752;
+        font-weight: normal;
+      }
+      &:hover .td {
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+      }
+      &:nth-of-type(odd) .td {
+        background-color: #303030;
+      }
+    `,
+    Cell: `
+      &:last-of-type {
+        text-align: right;
+      },
+    `
+  });
+
+  const temperature_theme = useTheme([
+    common_theme,
+    {
+      Table: `
+        --data-table-library_grid-template-columns: minmax(0, 1fr) 35%;
+      `
+    }
+  ]);
+
+  const analog_theme = useTheme([
+    common_theme,
+    {
+      Table: `
+        --data-table-library_grid-template-columns: 80px repeat(1, minmax(0, 1fr)) 120px 110px;
+      `
+    }
+  ]);
+
+  const getSortIcon = (state: State, sortKey: unknown) => {
+    if (state.sortKey === sortKey && state.reverse) {
+      return <KeyboardArrowDownOutlinedIcon />;
+    }
+    if (state.sortKey === sortKey && !state.reverse) {
+      return <KeyboardArrowUpOutlinedIcon />;
+    }
+    return <UnfoldMoreOutlinedIcon />;
+  };
+
+  const analog_sort = useSort(
+    { nodes: sensorData.as },
+    {},
+    {
+      sortIcon: {
+        iconDefault: <UnfoldMoreOutlinedIcon />,
+        iconUp: <KeyboardArrowUpOutlinedIcon />,
+        iconDown: <KeyboardArrowDownOutlinedIcon />
+      },
+      sortToggleType: SortToggleType.AlternateWithReset,
+      sortFns: {
+        GPIO: (array) => array.sort((a, b) => a.g - b.g),
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+        NAME: (array) => array.sort((a, b) => a.n.localeCompare(b.n)),
+        TYPE: (array) => array.sort((a, b) => a.t - b.t),
+        VALUE: (array) => array.sort((a, b) => a.v - b.v)
+      }
+    }
+  );
+
+  const temperature_sort = useSort(
+    { nodes: sensorData.ts },
+    {},
+    {
+      sortIcon: {
+        iconDefault: <UnfoldMoreOutlinedIcon />,
+        iconUp: <KeyboardArrowUpOutlinedIcon />,
+        iconDown: <KeyboardArrowDownOutlinedIcon />
+      },
+      sortToggleType: SortToggleType.AlternateWithReset,
+      sortFns: {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+        NAME: (array) => array.sort((a, b) => a.n.localeCompare(b.n)),
+        VALUE: (array) => array.sort((a, b) => a.t - b.t)
+      }
+    }
+  );
+
+  useEffect(() => {
+    const timer = setInterval(() => fetchSensorData(), 30000);
+    return () => {
+      clearInterval(timer);
+    };
+  });
+
+  useLayoutTitle(LL.SENSORS());
+
+  const formatDurationMin = (duration_min: number) => {
+    const days = Math.trunc((duration_min * 60000) / 86400000);
+    const hours = Math.trunc((duration_min * 60000) / 3600000) % 24;
+    const minutes = Math.trunc((duration_min * 60000) / 60000) % 60;
+
+    let formatted = '';
+    if (days) {
+      formatted += LL.NUM_DAYS({ num: days }) + ' ';
+    }
+    if (hours) {
+      formatted += LL.NUM_HOURS({ num: hours }) + ' ';
+    }
+    if (minutes) {
+      formatted += LL.NUM_MINUTES({ num: minutes });
+    }
+    return formatted;
+  };
+
+  function formatValue(value: unknown, uom: DeviceValueUOM) {
+    if (value === undefined) {
+      return '';
+    }
+    if (typeof value !== 'number') {
+      return value as string;
+    }
+    switch (uom) {
+      case DeviceValueUOM.HOURS:
+        return value ? formatDurationMin(value * 60) : LL.NUM_HOURS({ num: 0 });
+      case DeviceValueUOM.MINUTES:
+        return value ? formatDurationMin(value) : LL.NUM_MINUTES({ num: 0 });
+      case DeviceValueUOM.SECONDS:
+        return LL.NUM_SECONDS({ num: value });
+      case DeviceValueUOM.NONE:
+        return new Intl.NumberFormat().format(value);
+      case DeviceValueUOM.DEGREES:
+      case DeviceValueUOM.DEGREES_R:
+      case DeviceValueUOM.FAHRENHEIT:
+        return (
+          new Intl.NumberFormat(undefined, {
+            minimumFractionDigits: 1
+          }).format(value) +
+          ' ' +
+          DeviceValueUOM_s[uom]
+        );
+      default:
+        return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
+    }
+  }
+
+  const updateTemperatureSensor = (ts: TemperatureSensor) => {
+    if (me.admin) {
+      setSelectedTemperatureSensor(ts);
+      setTemperatureDialogOpen(true);
+    }
+  };
+
+  const onTemperatureDialogClose = () => {
+    setTemperatureDialogOpen(false);
+  };
+
+  const onTemperatureDialogSave = async (ts: TemperatureSensor) => {
+    await writeTemperatureSensor({ id: ts.id, name: ts.n, offset: ts.o })
+      .then(() => {
+        toast.success(LL.UPDATED_OF(LL.SENSOR(1)));
+      })
+      .catch(() => {
+        toast.error(LL.UPDATE_OF(LL.SENSOR(2)) + ' ' + LL.FAILED(1));
+      })
+      .finally(async () => {
+        setTemperatureDialogOpen(false);
+        setSelectedTemperatureSensor(undefined);
+        await fetchSensorData();
+      });
+  };
+
+  const updateAnalogSensor = (as: AnalogSensor) => {
+    if (me.admin) {
+      setCreating(false);
+      setSelectedAnalogSensor(as);
+      setAnalogDialogOpen(true);
+    }
+  };
+
+  const onAnalogDialogClose = () => {
+    setAnalogDialogOpen(false);
+  };
+
+  const addAnalogSensor = () => {
+    setCreating(true);
+    setSelectedAnalogSensor({
+      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
+      n: '',
+      g: 21, // default GPIO 21 which is safe for all platforms
+      u: 0,
+      v: 0,
+      o: 0,
+      t: 0,
+      f: 1,
+      d: false
+    });
+    setAnalogDialogOpen(true);
+  };
+
+  const onAnalogDialogSave = async (as: AnalogSensor) => {
+    await writeAnalogSensor({
+      id: as.id,
+      gpio: as.g,
+      name: as.n,
+      offset: as.o,
+      factor: as.f,
+      uom: as.u,
+      type: as.t,
+      deleted: as.d
+    })
+      .then(() => {
+        toast.success(LL.UPDATED_OF(LL.ANALOG_SENSOR(2)));
+      })
+      .catch(() => {
+        toast.error(LL.UPDATE_OF(LL.ANALOG_SENSOR(5)) + ' ' + LL.FAILED(1));
+      })
+      .finally(async () => {
+        setAnalogDialogOpen(false);
+        setSelectedAnalogSensor(undefined);
+        await fetchSensorData();
+      });
+  };
+
+  const RenderTemperatureSensors = () => (
+    <Table
+      data={{ nodes: sensorData.ts }}
+      theme={temperature_theme}
+      sort={temperature_sort}
+      layout={{ custom: true }}
+    >
+      {(tableList: TemperatureSensor[]) => (
+        <>
+          <Header>
+            <HeaderRow>
+              <HeaderCell resize>
+                <Button
+                  fullWidth
+                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                  endIcon={getSortIcon(temperature_sort.state, 'NAME')}
+                  onClick={() =>
+                    temperature_sort.fns.onToggleSort({ sortKey: 'NAME' })
+                  }
+                >
+                  {LL.NAME(0)}
+                </Button>
+              </HeaderCell>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={{ fontSize: '14px', justifyContent: 'flex-end' }}
+                  endIcon={getSortIcon(temperature_sort.state, 'VALUE')}
+                  onClick={() =>
+                    temperature_sort.fns.onToggleSort({ sortKey: 'VALUE' })
+                  }
+                >
+                  {LL.VALUE(0)}
+                </Button>
+              </HeaderCell>
+            </HeaderRow>
+          </Header>
+          <Body>
+            {tableList.map((ts: TemperatureSensor) => (
+              <Row key={ts.id} item={ts} onClick={() => updateTemperatureSensor(ts)}>
+                <Cell>{ts.n}</Cell>
+                <Cell>{formatValue(ts.t, ts.u)}</Cell>
+              </Row>
+            ))}
+          </Body>
+        </>
+      )}
+    </Table>
+  );
+
+  const RenderAnalogSensors = () => (
+    <Table
+      data={{ nodes: sensorData.as }}
+      theme={analog_theme}
+      sort={analog_sort}
+      layout={{ custom: true }}
+    >
+      {(tableList: AnalogSensor[]) => (
+        <>
+          <Header>
+            <HeaderRow>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                  endIcon={getSortIcon(analog_sort.state, 'GPIO')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'GPIO' })}
+                >
+                  GPIO
+                </Button>
+              </HeaderCell>
+              <HeaderCell resize>
+                <Button
+                  fullWidth
+                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                  endIcon={getSortIcon(analog_sort.state, 'NAME')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'NAME' })}
+                >
+                  {LL.NAME(0)}
+                </Button>
+              </HeaderCell>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                  endIcon={getSortIcon(analog_sort.state, 'TYPE')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'TYPE' })}
+                >
+                  {LL.TYPE(0)}
+                </Button>
+              </HeaderCell>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={{ fontSize: '14px', justifyContent: 'flex-end' }}
+                  endIcon={getSortIcon(analog_sort.state, 'VALUE')}
+                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
+                >
+                  {LL.VALUE(0)}
+                </Button>
+              </HeaderCell>
+            </HeaderRow>
+          </Header>
+          <Body>
+            {tableList.map((a: AnalogSensor) => (
+              <Row key={a.id} item={a} onClick={() => updateAnalogSensor(a)}>
+                <Cell stiff>{a.g}</Cell>
+                <Cell>{a.n}</Cell>
+                <Cell stiff>{AnalogTypeNames[a.t]} </Cell>
+                {a.t === AnalogType.DIGITAL_OUT || a.t === AnalogType.DIGITAL_IN ? (
+                  <Cell stiff>{a.v ? LL.ON() : LL.OFF()}</Cell>
+                ) : (
+                  <Cell stiff>{a.t ? formatValue(a.v, a.u) : ''}</Cell>
+                )}
+              </Row>
+            ))}
+          </Body>
+        </>
+      )}
+    </Table>
+  );
+
+  return (
+    <SectionContent>
+      <Typography sx={{ pb: 1 }} variant="h6" color="secondary">
+        {LL.TEMP_SENSORS()}
+      </Typography>
+      <RenderTemperatureSensors />
+      {selectedTemperatureSensor && (
+        <DashboardSensorsTemperatureDialog
+          open={temperatureDialogOpen}
+          onClose={onTemperatureDialogClose}
+          onSave={onTemperatureDialogSave}
+          selectedItem={selectedTemperatureSensor}
+          validator={temperatureSensorItemValidation(sensorData.ts)}
+        />
+      )}
+      {sensorData?.analog_enabled === true && (
+        <>
+          <Typography sx={{ pt: 4, pb: 1 }} variant="h6" color="secondary">
+            {LL.ANALOG_SENSORS()}
+          </Typography>
+          <RenderAnalogSensors />
+          {selectedAnalogSensor && (
+            <DashboardSensorsAnalogDialog
+              open={analogDialogOpen}
+              onClose={onAnalogDialogClose}
+              onSave={onAnalogDialogSave}
+              creating={creating}
+              selectedItem={selectedAnalogSensor}
+              validator={analogSensorItemValidation(
+                sensorData.as,
+                creating,
+                sensorData.platform
+              )}
+            />
+          )}
+        </>
+      )}
+      <ButtonRow>
+        <Box mt={1} display="flex" flexWrap="wrap">
+          <Box flexGrow={1}>
+            <Button
+              startIcon={<RefreshIcon />}
+              variant="outlined"
+              color="secondary"
+              onClick={fetchSensorData}
+            >
+              {LL.REFRESH()}
+            </Button>
+          </Box>
+          {sensorData?.analog_enabled === true && me.admin && (
+            <Button
+              variant="outlined"
+              color="primary"
+              startIcon={<AddCircleOutlineOutlinedIcon />}
+              onClick={addAnalogSensor}
+            >
+              {LL.ADD(0) + ' ' + LL.ANALOG_SENSOR(1)}
+            </Button>
+          )}
+        </Box>
+      </ButtonRow>
+    </SectionContent>
+  );
+};
+
+export default Sensors;

interface/src/app/main/SensorsAnalogDialog.tsx

@@ -0,0 +1,341 @@
+import { useEffect, useState } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  InputAdornment,
+  MenuItem,
+  TextField,
+  Typography
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
+import { ValidatedTextField } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { numberValue, updateValue } from 'utils';
+import { validate } from 'validators';
+
+import { AnalogType, AnalogTypeNames, DeviceValueUOM_s } from './types';
+import type { AnalogSensor } from './types';
+
+interface DashboardSensorsAnalogDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (as: AnalogSensor) => void;
+  creating: boolean;
+  selectedItem: AnalogSensor;
+  validator: Schema;
+}
+
+const SensorsAnalogDialog = ({
+  open,
+  onClose,
+  onSave,
+  creating,
+  selectedItem,
+  validator
+}: DashboardSensorsAnalogDialogProps) => {
+  const { LL } = useI18nContext();
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+  const [editItem, setEditItem] = useState<AnalogSensor>(selectedItem);
+  const updateFormValue = updateValue(setEditItem);
+
+  useEffect(() => {
+    if (open) {
+      setFieldErrors(undefined);
+      setEditItem(selectedItem);
+    }
+  }, [open, selectedItem]);
+
+  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
+  };
+
+  const save = async () => {
+    try {
+      setFieldErrors(undefined);
+      await validate(validator, editItem);
+      onSave(editItem);
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+  };
+
+  const remove = () => {
+    editItem.d = true;
+    onSave(editItem);
+  };
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
+      <DialogTitle>
+        {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
+        {LL.ANALOG_SENSOR(0)}
+      </DialogTitle>
+      <DialogContent dividers>
+        <Grid container spacing={2}>
+          <Grid item xs={4}>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="g"
+              label="GPIO"
+              value={numberValue(editItem.g)}
+              type="number"
+              variant="outlined"
+              onChange={updateFormValue}
+            />
+          </Grid>
+          {creating && (
+            <Grid item>
+              <Box color="warning.main" mt={2}>
+                <Typography variant="body2">{LL.WARN_GPIO()}</Typography>
+              </Box>
+            </Grid>
+          )}
+          <Grid item xs={12}>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="n"
+              label={LL.NAME(0)}
+              value={editItem.n}
+              fullWidth
+              variant="outlined"
+              onChange={updateFormValue}
+            />
+          </Grid>
+          <Grid item xs={8}>
+            <TextField
+              name="t"
+              label={LL.TYPE(0)}
+              value={editItem.t}
+              fullWidth
+              select
+              onChange={updateFormValue}
+            >
+              {AnalogTypeNames.map((val, i) => (
+                <MenuItem key={i} value={i}>
+                  {val}
+                </MenuItem>
+              ))}
+            </TextField>
+          </Grid>
+          {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
+            <Grid item xs={4}>
+              <TextField
+                name="u"
+                label={LL.UNIT()}
+                value={editItem.u}
+                fullWidth
+                select
+                onChange={updateFormValue}
+              >
+                {DeviceValueUOM_s.map((val, i) => (
+                  <MenuItem key={i} value={i}>
+                    {val}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+          )}
+          {editItem.t === AnalogType.ADC && (
+            <Grid item xs={4}>
+              <TextField
+                name="o"
+                label={LL.OFFSET()}
+                value={numberValue(editItem.o)}
+                fullWidth
+                type="number"
+                variant="outlined"
+                onChange={updateFormValue}
+                inputProps={{ min: '0', max: '3300', step: '1' }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">mV</InputAdornment>
+                  )
+                }}
+              />
+            </Grid>
+          )}
+          {editItem.t === AnalogType.COUNTER && (
+            <Grid item xs={4}>
+              <TextField
+                name="o"
+                label={LL.STARTVALUE()}
+                value={numberValue(editItem.o)}
+                fullWidth
+                type="number"
+                variant="outlined"
+                onChange={updateFormValue}
+                inputProps={{ step: '0.001' }}
+              />
+            </Grid>
+          )}
+          {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
+            <Grid item xs={4}>
+              <TextField
+                name="f"
+                label={LL.FACTOR()}
+                value={numberValue(editItem.f)}
+                fullWidth
+                type="number"
+                variant="outlined"
+                onChange={updateFormValue}
+                inputProps={{ step: '0.001' }}
+              />
+            </Grid>
+          )}
+          {editItem.t === AnalogType.DIGITAL_OUT &&
+            (editItem.g === 25 || editItem.g === 26) && (
+              <Grid item xs={4}>
+                <TextField
+                  name="o"
+                  label={LL.VALUE(0)}
+                  value={numberValue(editItem.o)}
+                  fullWidth
+                  type="number"
+                  variant="outlined"
+                  onChange={updateFormValue}
+                  inputProps={{ min: '0', max: '255', step: '1' }}
+                />
+              </Grid>
+            )}
+          {editItem.t === AnalogType.DIGITAL_OUT &&
+            editItem.g !== 25 &&
+            editItem.g !== 26 && (
+              <>
+                <Grid item xs={4}>
+                  <TextField
+                    name="o"
+                    label={LL.VALUE(0)}
+                    value={numberValue(editItem.o)}
+                    fullWidth
+                    select
+                    variant="outlined"
+                    onChange={updateFormValue}
+                  >
+                    <MenuItem value={0}>{LL.OFF()}</MenuItem>
+                    <MenuItem value={1}>{LL.ON()}</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={4}>
+                  <TextField
+                    name="f"
+                    label={LL.POLARITY()}
+                    value={editItem.f}
+                    fullWidth
+                    select
+                    onChange={updateFormValue}
+                  >
+                    <MenuItem value={1}>{LL.ACTIVEHIGH()}</MenuItem>
+                    <MenuItem value={-1}>{LL.ACTIVELOW()}</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={4}>
+                  <TextField
+                    name="u"
+                    label={LL.STARTVALUE()}
+                    value={editItem.u}
+                    fullWidth
+                    select
+                    onChange={updateFormValue}
+                  >
+                    <MenuItem value={0}>{LL.UNCHANGED()}</MenuItem>
+                    <MenuItem value={1}>
+                      {LL.ALWAYS()}&nbsp;{LL.OFF()}
+                    </MenuItem>
+                    <MenuItem value={2}>
+                      {LL.ALWAYS()}&nbsp;{LL.ON()}
+                    </MenuItem>
+                  </TextField>
+                </Grid>
+              </>
+            )}
+          {(editItem.t === AnalogType.PWM_0 ||
+            editItem.t === AnalogType.PWM_1 ||
+            editItem.t === AnalogType.PWM_2) && (
+            <>
+              <Grid item xs={4}>
+                <TextField
+                  name="f"
+                  label={LL.FREQ()}
+                  value={numberValue(editItem.f)}
+                  fullWidth
+                  type="number"
+                  variant="outlined"
+                  onChange={updateFormValue}
+                  inputProps={{ min: '1', max: '5000', step: '1' }}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">Hz</InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={4}>
+                <TextField
+                  name="o"
+                  label={LL.DUTY_CYCLE()}
+                  value={numberValue(editItem.o)}
+                  fullWidth
+                  type="number"
+                  variant="outlined"
+                  onChange={updateFormValue}
+                  inputProps={{ min: '0', max: '100', step: '0.1' }}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">%</InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+            </>
+          )}
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        {!creating && (
+          <Box flexGrow={1} sx={{ '& button': { mt: 0 } }}>
+            <Button
+              startIcon={<RemoveIcon />}
+              variant="outlined"
+              color="error"
+              onClick={remove}
+            >
+              {LL.REMOVE()}
+            </Button>
+          </Box>
+        )}
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<WarningIcon color="warning" />}
+          variant="contained"
+          onClick={save}
+          color="info"
+        >
+          {creating ? LL.ADD(0) : LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default SensorsAnalogDialog;

interface/src/app/main/SensorsTemperatureDialog.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  InputAdornment,
+  TextField,
+  Typography
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
+import { ValidatedTextField } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { numberValue, updateValue } from 'utils';
+import { validate } from 'validators';
+
+import type { TemperatureSensor } from './types';
+
+interface SensorsTemperatureDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (ts: TemperatureSensor) => void;
+  selectedItem: TemperatureSensor;
+  validator: Schema;
+}
+
+const SensorsTemperatureDialog = ({
+  open,
+  onClose,
+  onSave,
+  selectedItem,
+  validator
+}: SensorsTemperatureDialogProps) => {
+  const { LL } = useI18nContext();
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+  const [editItem, setEditItem] = useState<TemperatureSensor>(selectedItem);
+  const updateFormValue = updateValue(setEditItem);
+
+  useEffect(() => {
+    if (open) {
+      setFieldErrors(undefined);
+      setEditItem(selectedItem);
+    }
+  }, [open, selectedItem]);
+
+  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (reason !== 'backdropClick') {
+      onClose();
+    }
+  };
+
+  const save = async () => {
+    try {
+      setFieldErrors(undefined);
+      await validate(validator, editItem);
+      onSave(editItem);
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+  };
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
+      <DialogTitle>
+        {LL.EDIT()}&nbsp;{LL.TEMP_SENSOR()}
+      </DialogTitle>
+      <DialogContent dividers>
+        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
+          <Typography variant="body2">
+            {LL.ID_OF(LL.SENSOR(0))}: {editItem.id}
+          </Typography>
+        </Box>
+        <Grid container spacing={1}>
+          <Grid item>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="n"
+              label={LL.NAME(0)}
+              value={editItem.n}
+              // autoFocus
+              sx={{ width: '30ch' }}
+              onChange={updateFormValue}
+            />
+          </Grid>
+          <Grid item>
+            <TextField
+              name="o"
+              label={LL.OFFSET()}
+              value={numberValue(editItem.o)}
+              sx={{ width: '12ch' }}
+              type="number"
+              variant="outlined"
+              onChange={updateFormValue}
+              inputProps={{ min: '-5', max: '5', step: '0.1' }}
+              InputProps={{
+                startAdornment: <InputAdornment position="start">°C</InputAdornment>
+              }}
+            />
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<WarningIcon color="warning" />}
+          variant="contained"
+          onClick={save}
+          color="info"
+        >
+          {LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default SensorsTemperatureDialog;

interface/src/app/main/api.ts

@@ -0,0 +1,153 @@
+import { alovaInstance } from 'api/endpoints';
+
+import type {
+  APIcall,
+  Activity,
+  CoreData,
+  DeviceData,
+  DeviceEntity,
+  Devices,
+  Entities,
+  EntityItem,
+  ModuleItem,
+  Modules,
+  Schedule,
+  ScheduleItem,
+  SensorData,
+  Settings,
+  WriteAnalogSensor,
+  WriteTemperatureSensor
+} from './types';
+
+// DashboardDevices
+export const readCoreData = () => alovaInstance.Get<CoreData>(`/rest/coreData`);
+export const readDeviceData = (id: number) =>
+  alovaInstance.Get<DeviceData>('/rest/deviceData', {
+    // alovaInstance.Get<DeviceData>(`/rest/deviceData/${id}`, {
+    params: { id },
+    responseType: 'arraybuffer' // uses msgpack
+  });
+export const writeDeviceValue = (data: { id: number; c: string; v: unknown }) =>
+  alovaInstance.Post('/rest/writeDeviceValue', data);
+
+// Application Settings
+export const readSettings = () => alovaInstance.Get<Settings>('/rest/settings');
+export const writeSettings = (data: Settings) =>
+  alovaInstance.Post('/rest/settings', data);
+export const getBoardProfile = (boardProfile: string) =>
+  alovaInstance.Get('/rest/boardProfile', {
+    params: { boardProfile }
+  });
+
+// Sensors
+export const readSensorData = () =>
+  alovaInstance.Get<SensorData>('/rest/sensorData');
+export const writeTemperatureSensor = (ts: WriteTemperatureSensor) =>
+  alovaInstance.Post('/rest/writeTemperatureSensor', ts);
+export const writeAnalogSensor = (as: WriteAnalogSensor) =>
+  alovaInstance.Post('/rest/writeAnalogSensor', as);
+
+// Activity
+export const readActivity = () => alovaInstance.Get<Activity>('/rest/activity');
+
+// Scan devices
+export const scanDevices = () => alovaInstance.Post('/rest/scanDevices');
+
+// API, used in HelpInformation
+export const API = (apiCall: APIcall) => alovaInstance.Post('/api', apiCall);
+
+// UploadFileForm
+export const getSettings = () => alovaInstance.Get('/rest/getSettings');
+export const getCustomizations = () => alovaInstance.Get('/rest/getCustomizations');
+export const getEntities = () => alovaInstance.Get<Entities>('/rest/getEntities');
+export const getSchedule = () => alovaInstance.Get('/rest/getSchedule');
+
+// SettingsCustomization
+export const readDeviceEntities = (id: number) =>
+  // alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities/${id}`, {
+  alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities`, {
+    params: { id },
+    responseType: 'arraybuffer',
+    transformData(data) {
+      return (data as DeviceEntity[]).map((de: DeviceEntity) => ({
+        ...de,
+        o_m: de.m,
+        o_cn: de.cn,
+        o_mi: de.mi,
+        o_ma: de.ma
+      }));
+    }
+  });
+export const readDevices = () => alovaInstance.Get<Devices>('/rest/devices');
+export const resetCustomizations = () =>
+  alovaInstance.Post('/rest/resetCustomizations');
+export const writeCustomizationEntities = (data: {
+  id: number;
+  entity_ids: string[];
+}) => alovaInstance.Post('/rest/customizationEntities', data);
+export const writeDeviceName = (data: { id: number; name: string }) =>
+  alovaInstance.Post('/rest/writeDeviceName', data);
+
+// SettingsScheduler
+export const readSchedule = () =>
+  alovaInstance.Get<ScheduleItem[]>('/rest/schedule', {
+    name: 'schedule',
+    transformData(data) {
+      return (data as Schedule).schedule.map((si: ScheduleItem) => ({
+        ...si,
+        o_id: si.id,
+        o_active: si.active,
+        o_deleted: si.deleted,
+        o_flags: si.flags,
+        o_time: si.time,
+        o_cmd: si.cmd,
+        o_value: si.value,
+        o_name: si.name
+      }));
+    }
+  });
+export const writeSchedule = (data: Schedule) =>
+  alovaInstance.Post('/rest/schedule', data);
+
+// Modules
+export const readModules = () =>
+  alovaInstance.Get<ModuleItem[]>('/rest/modules', {
+    name: 'modules',
+    transformData(data) {
+      return (data as Modules).modules.map((mi: ModuleItem) => ({
+        ...mi,
+        o_enabled: mi.enabled,
+        o_license: mi.license
+      }));
+    }
+  });
+export const writeModules = (data: {
+  key: string;
+  enabled: boolean;
+  license: string;
+}) => alovaInstance.Post('/rest/modules', data);
+
+// SettingsEntities
+export const readCustomEntities = () =>
+  alovaInstance.Get<EntityItem[]>('/rest/customEntities', {
+    name: 'entities',
+    transformData(data) {
+      return (data as Entities).entities.map((ei: EntityItem) => ({
+        ...ei,
+        o_id: ei.id,
+        o_ram: ei.ram,
+        o_device_id: ei.device_id,
+        o_type_id: ei.type_id,
+        o_offset: ei.offset,
+        o_factor: ei.factor,
+        o_uom: ei.uom,
+        o_value_type: ei.value_type,
+        o_name: ei.name,
+        o_writeable: ei.writeable,
+        o_value: ei.value,
+        o_deleted: ei.deleted
+      }));
+    }
+  });
+export const writeCustomEntities = (data: Entities) =>
+  alovaInstance.Post('/rest/customEntities', data);

interface/src/app/main/deviceValue.ts

@@ -0,0 +1,58 @@
+import type { TranslationFunctions } from 'i18n/i18n-types';
+
+import { DeviceValueUOM, DeviceValueUOM_s } from './types';
+
+const formatDurationMin = (LL: TranslationFunctions, duration_min: number) => {
+  const days = Math.trunc((duration_min * 60000) / 86400000);
+  const hours = Math.trunc((duration_min * 60000) / 3600000) % 24;
+  const minutes = Math.trunc((duration_min * 60000) / 60000) % 60;
+
+  let formatted = '';
+  if (days) {
+    formatted += LL.NUM_DAYS({ num: days });
+  }
+
+  if (hours) {
+    if (formatted) formatted += ' ';
+    formatted += LL.NUM_HOURS({ num: hours });
+  }
+
+  if (minutes) {
+    if (formatted) formatted += ' ';
+    formatted += LL.NUM_MINUTES({ num: minutes });
+  }
+
+  return formatted;
+};
+
+export function formatValue(
+  LL: TranslationFunctions,
+  value: unknown,
+  uom: DeviceValueUOM
+) {
+  if (typeof value !== 'number') {
+    return (value === undefined ? '' : value) as string;
+  }
+  switch (uom) {
+    case DeviceValueUOM.HOURS:
+      return value ? formatDurationMin(LL, value * 60) : LL.NUM_HOURS({ num: 0 });
+    case DeviceValueUOM.MINUTES:
+      return value ? formatDurationMin(LL, value) : LL.NUM_MINUTES({ num: 0 });
+    case DeviceValueUOM.SECONDS:
+      return LL.NUM_SECONDS({ num: value });
+    case DeviceValueUOM.NONE:
+      return new Intl.NumberFormat().format(value);
+    case DeviceValueUOM.DEGREES:
+    case DeviceValueUOM.DEGREES_R:
+    case DeviceValueUOM.FAHRENHEIT:
+      return (
+        new Intl.NumberFormat(undefined, {
+          minimumFractionDigits: 1
+        }).format(value) +
+        ' ' +
+        DeviceValueUOM_s[uom]
+      );
+    default:
+      return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
+  }
+}

interface/src/app/main/types.ts

@@ -0,0 +1,435 @@
+export interface Settings {
+  locale: string;
+  tx_mode: number;
+  ems_bus_id: number;
+  syslog_enabled: boolean;
+  syslog_level: number;
+  syslog_mark_interval: number;
+  syslog_host: string;
+  syslog_port: number;
+  boiler_heatingoff: boolean;
+  remote_timeout_en: boolean;
+  remote_timeout: number;
+  shower_timer: boolean;
+  shower_alert: boolean;
+  shower_alert_coldshot: number;
+  shower_alert_trigger: number;
+  shower_min_duration: number;
+  rx_gpio: number;
+  tx_gpio: number;
+  telnet_enabled: boolean;
+  dallas_gpio: number;
+  dallas_parasite: boolean;
+  led_gpio: number;
+  hide_led: boolean;
+  low_clock: boolean;
+  notoken_api: boolean;
+  readonly_mode: boolean;
+  analog_enabled: boolean;
+  pbutton_gpio: number;
+  trace_raw: boolean;
+  board_profile: string;
+  bool_format: number;
+  bool_dashboard: number;
+  enum_format: number;
+  fahrenheit: boolean;
+  phy_type: number;
+  eth_power: number;
+  eth_phy_addr: number;
+  eth_clock_mode: number;
+  platform: string;
+  modbus_enabled: boolean;
+  modbus_port: number;
+  modbus_max_clients: number;
+  modbus_timeout: number;
+}
+
+export enum busConnectionStatus {
+  BUS_STATUS_CONNECTED = 0,
+  BUS_STATUS_TX_ERRORS = 1,
+  BUS_STATUS_OFFLINE = 2
+}
+
+export interface Stat {
+  id: number; // id
+  s: number; // success
+  f: number; // fail
+  q: number; // quality
+}
+
+export interface Activity {
+  stats: Stat[];
+}
+
+export interface Device {
+  id: number; // id index
+  tn: string; // device type translated name
+  t: number; // device type id
+  b: string; // brand
+  n: string; // name
+  d: number; // deviceid
+  p: number; // productid
+  v: string; // version
+  e: number; // entities
+}
+
+export interface TemperatureSensor {
+  id: string; // id string
+  n: string; // name/alias
+  t?: number; // temp, optional
+  o: number; // offset
+  u: number; // uom
+}
+
+export interface AnalogSensor {
+  id: number;
+  g: number; // GPIO
+  n: string;
+  v: number;
+  u: number;
+  o: number;
+  f: number;
+  t: number;
+  d: boolean; // deleted flag
+}
+
+export interface WriteTemperatureSensor {
+  id: string;
+  name: string;
+  offset: number;
+}
+
+export interface SensorData {
+  ts: TemperatureSensor[];
+  as: AnalogSensor[];
+  analog_enabled: boolean;
+  platform: string;
+}
+
+export interface CoreData {
+  connected: boolean;
+  devices: Device[];
+}
+
+export interface DeviceShort {
+  i: number; // id
+  d?: number; // deviceid
+  p?: number; // productid
+  s: string; // shortname
+  t?: number; // device type id
+  tn?: string; // device type internal name (translated)
+  url?: string; // lowercase type name used in API URL
+}
+
+export interface Devices {
+  devices: DeviceShort[];
+}
+
+export interface DeviceValue {
+  id: string; // index, contains mask+name
+  v: unknown; // value, Number or String
+  u: number; // uom
+  c?: string; // command, optional
+  l?: string[]; // list, optional
+  h?: string; // help text, optional
+  s?: string; // steps for up/down, optional
+  m?: number; // min, optional
+  x?: number; // max, optional
+}
+export interface DeviceData {
+  data: DeviceValue[];
+}
+
+export interface DeviceEntity {
+  id: string; // shortname
+  v?: unknown; // value, in any format, optional
+  n?: string; // fullname, optional
+  cn?: string; // custom fullname, optional
+  m: DeviceEntityMask; // mask
+  w: boolean; // writeable
+  mi?: number; // min value
+  ma?: number; // max value
+  o_m?: number; // original mask before edits
+  o_cn?: string; // original cn before edits
+  o_mi?: number; // original min value
+  o_ma?: number; // original max value
+}
+
+export enum DeviceValueUOM {
+  NONE = 0,
+  DEGREES,
+  DEGREES_R,
+  PERCENT,
+  LMIN,
+  KWH,
+  WH,
+  HOURS,
+  MINUTES,
+  UA,
+  BAR,
+  KW,
+  W,
+  KB,
+  SECONDS,
+  DBM,
+  FAHRENHEIT,
+  MV,
+  SQM,
+  M3,
+  L,
+  KMIN,
+  K,
+  VOLTS,
+  MBAR
+}
+
+export const DeviceValueUOM_s = [
+  '',
+  '°C',
+  '°C',
+  '%',
+  'l/min',
+  'kWh',
+  'Wh',
+  'hours',
+  'minutes',
+  'µA',
+  'bar',
+  'kW',
+  'W',
+  'KB',
+  'seconds',
+  'dBm',
+  '°F',
+  'mV',
+  'm²',
+  'm³',
+  'l',
+  'K*min',
+  'K',
+  'V',
+  'mbar'
+];
+
+export enum AnalogType {
+  REMOVED = -1,
+  NOTUSED = 0,
+  DIGITAL_IN,
+  COUNTER,
+  ADC,
+  TIMER,
+  RATE,
+  DIGITAL_OUT,
+  PWM_0,
+  PWM_1,
+  PWM_2
+}
+
+export const AnalogTypeNames = [
+  '(disabled)',
+  'Digital In',
+  'Counter',
+  'ADC',
+  'Timer',
+  'Rate',
+  'Digital Out',
+  'PWM 0',
+  'PWM 1',
+  'PWM 2'
+];
+
+type BoardProfiles = Record<string, string>;
+
+export const BOARD_PROFILES: BoardProfiles = {
+  S32: 'BBQKees Gateway S32',
+  S32S3: 'BBQKees Gateway S3',
+  E32: 'BBQKees Gateway E32',
+  E32V2: 'BBQKees Gateway E32 V2',
+  NODEMCU: 'NodeMCU 32S',
+  'MH-ET': 'MH-ET Live D1 Mini',
+  LOLIN: 'Lolin D32',
+  OLIMEX: 'Olimex ESP32-EVB',
+  OLIMEXPOE: 'Olimex ESP32-POE',
+  C3MINI: 'Wemos C3 Mini',
+  S2MINI: 'Wemos S2 Mini',
+  S3MINI: 'Liligo S3'
+};
+
+export interface BoardProfile {
+  board_profile: string;
+  led_gpio: number;
+  dallas_gpio: number;
+  rx_gpio: number;
+  tx_gpio: number;
+  pbutton_gpio: number;
+  phy_type: number;
+  eth_power: number;
+  eth_phy_addr: number;
+  eth_clock_mode: number;
+}
+
+export interface APIcall {
+  device: string;
+  entity: string;
+  id: unknown;
+}
+export interface WriteAnalogSensor {
+  id: number;
+  gpio: number;
+  name: string;
+  factor: number;
+  offset: number;
+  uom: number;
+  type: number;
+  deleted: boolean;
+}
+
+export enum DeviceEntityMask {
+  DV_DEFAULT = 0,
+  DV_WEB_EXCLUDE = 1,
+  DV_API_MQTT_EXCLUDE = 2,
+  DV_READONLY = 4,
+  DV_FAVORITE = 8,
+  DV_DELETED = 128
+}
+
+export interface ScheduleItem {
+  id: number; // unique index
+  active: boolean;
+  deleted?: boolean; // optional
+  flags: number;
+  time: string;
+  cmd: string;
+  value: string;
+  name: string; // optional
+  o_id?: number;
+  o_active?: boolean;
+  o_deleted?: boolean;
+  o_flags?: number;
+  o_time?: string;
+  o_cmd?: string;
+  o_value?: string;
+  o_name?: string;
+}
+
+export interface Schedule {
+  schedule: ScheduleItem[];
+}
+
+export interface ModuleItem {
+  id: number; // unique index
+  key: string;
+  name: string;
+  author: string;
+  version: string;
+  status: number;
+  message: string;
+  enabled: boolean;
+  license: string;
+  o_enabled?: boolean;
+  o_license?: string;
+}
+
+export interface Modules {
+  modules: ModuleItem[];
+}
+
+export enum ScheduleFlag {
+  SCHEDULE_SUN = 1,
+  SCHEDULE_MON = 2,
+  SCHEDULE_TUE = 4,
+  SCHEDULE_WED = 8,
+  SCHEDULE_THU = 16,
+  SCHEDULE_FRI = 32,
+  SCHEDULE_SAT = 64,
+  SCHEDULE_TIMER = 128,
+  SCHEDULE_ONCHANGE = 129,
+  SCHEDULE_CONDITION = 130
+}
+
+export interface EntityItem {
+  id: number; // unique number
+  ram: number;
+  name: string;
+  device_id: number | string;
+  type_id: number | string;
+  offset: number;
+  factor: number;
+  uom: number;
+  value_type: number;
+  value?: unknown;
+  writeable: boolean;
+  deleted?: boolean;
+  o_id?: number;
+  o_ram?: number;
+  o_name?: string;
+  o_device_id?: number | string;
+  o_type_id?: number | string;
+  o_offset?: number;
+  o_factor?: number;
+  o_uom?: number;
+  o_value_type?: number;
+  o_deleted?: boolean;
+  o_writeable?: boolean;
+  o_value?: unknown;
+}
+
+export interface Entities {
+  entities: EntityItem[];
+}
+
+// matches emsdevice.h DeviceType
+export const enum DeviceType {
+  SYSTEM = 0,
+  TEMPERATURESENSOR,
+  ANALOGSENSOR,
+  SCHEDULER,
+  CUSTOM,
+  BOILER,
+  THERMOSTAT,
+  MIXER,
+  SOLAR,
+  HEATPUMP,
+  GATEWAY,
+  SWITCH,
+  CONTROLLER,
+  CONNECT,
+  ALERT,
+  EXTENSION,
+  GENERIC,
+  HEATSOURCE,
+  VENTILATION,
+  WATER,
+  POOL,
+  UNKNOWN
+}
+
+// matches emsdevicevalue.h
+export const enum DeviceValueType {
+  BOOL,
+  INT8,
+  UINT8,
+  INT16,
+  UINT16,
+  UINT24,
+  TIME, // same as UINT24
+  UINT32,
+  ENUM,
+  STRING,
+  CMD
+}
+
+export const DeviceValueTypeNames = [
+  //
+  'BOOL',
+  'INT8',
+  'UINT8',
+  'INT16',
+  'UINT16',
+  'UINT24',
+  'TIME',
+  'UINT32',
+  'ENUM',
+  'RAW',
+  'CMD'
+];

interface/src/app/main/validators.ts

@@ -0,0 +1,488 @@
+import Schema from 'async-validator';
+import type { InternalRuleItem } from 'async-validator';
+import { IP_OR_HOSTNAME_VALIDATOR } from 'validators/shared';
+
+import type {
+  AnalogSensor,
+  DeviceValue,
+  EntityItem,
+  ScheduleItem,
+  Settings,
+  TemperatureSensor
+} from './types';
+
+export const GPIO_VALIDATOR = {
+  validator(
+    rule: InternalRuleItem,
+    value: number,
+    callback: (error?: string) => void
+  ) {
+    if (
+      value &&
+      (value === 1 ||
+        (value >= 6 && value <= 11) ||
+        value === 20 ||
+        value === 24 ||
+        (value >= 28 && value <= 31) ||
+        value > 40 ||
+        value < 0)
+    ) {
+      callback('Must be an valid GPIO port');
+    } else {
+      callback();
+    }
+  }
+};
+
+export const GPIO_VALIDATORR = {
+  validator(
+    rule: InternalRuleItem,
+    value: number,
+    callback: (error?: string) => void
+  ) {
+    if (
+      value &&
+      (value === 1 ||
+        (value >= 6 && value <= 11) ||
+        (value >= 16 && value <= 17) ||
+        value === 20 ||
+        value === 24 ||
+        (value >= 28 && value <= 31) ||
+        value > 40 ||
+        value < 0)
+    ) {
+      callback('Must be an valid GPIO port');
+    } else {
+      callback();
+    }
+  }
+};
+
+export const GPIO_VALIDATORC3 = {
+  validator(
+    rule: InternalRuleItem,
+    value: number,
+    callback: (error?: string) => void
+  ) {
+    if (value && ((value >= 11 && value <= 19) || value > 21 || value < 0)) {
+      callback('Must be an valid GPIO port');
+    } else {
+      callback();
+    }
+  }
+};
+
+export const GPIO_VALIDATORS2 = {
+  validator(
+    rule: InternalRuleItem,
+    value: number,
+    callback: (error?: string) => void
+  ) {
+    if (
+      value &&
+      ((value >= 19 && value <= 20) ||
+        (value >= 22 && value <= 32) ||
+        value > 40 ||
+        value < 0)
+    ) {
+      callback('Must be an valid GPIO port');
+    } else {
+      callback();
+    }
+  }
+};
+
+export const GPIO_VALIDATORS3 = {
+  validator(
+    rule: InternalRuleItem,
+    value: number,
+    callback: (error?: string) => void
+  ) {
+    if (
+      value &&
+      ((value >= 19 && value <= 20) ||
+        (value >= 22 && value <= 37) ||
+        (value >= 39 && value <= 42) ||
+        value > 48 ||
+        value < 0)
+    ) {
+      callback('Must be an valid GPIO port');
+    } else {
+      callback();
+    }
+  }
+};
+
+export const createSettingsValidator = (settings: Settings) =>
+  new Schema({
+    ...(settings.board_profile === 'CUSTOM' &&
+      settings.platform === 'ESP32' && {
+        led_gpio: [
+          { required: true, message: 'LED GPIO is required' },
+          GPIO_VALIDATOR
+        ],
+        dallas_gpio: [
+          { required: true, message: 'GPIO is required' },
+          GPIO_VALIDATOR
+        ],
+        pbutton_gpio: [
+          { required: true, message: 'Button GPIO is required' },
+          GPIO_VALIDATOR
+        ],
+        tx_gpio: [
+          { required: true, message: 'Tx GPIO is required' },
+          GPIO_VALIDATOR
+        ],
+        rx_gpio: [{ required: true, message: 'Rx GPIO is required' }, GPIO_VALIDATOR]
+      }),
+    ...(settings.board_profile === 'CUSTOM' &&
+      settings.platform === 'ESP32R' && {
+        led_gpio: [
+          { required: true, message: 'LED GPIO is required' },
+          GPIO_VALIDATORR
+        ],
+        dallas_gpio: [
+          { required: true, message: 'GPIO is required' },
+          GPIO_VALIDATORR
+        ],
+        pbutton_gpio: [
+          { required: true, message: 'Button GPIO is required' },
+          GPIO_VALIDATORR
+        ],
+        tx_gpio: [
+          { required: true, message: 'Tx GPIO is required' },
+          GPIO_VALIDATORR
+        ],
+        rx_gpio: [
+          { required: true, message: 'Rx GPIO is required' },
+          GPIO_VALIDATORR
+        ]
+      }),
+    ...(settings.board_profile === 'CUSTOM' &&
+      settings.platform === 'ESP32-C3' && {
+        led_gpio: [
+          { required: true, message: 'LED GPIO is required' },
+          GPIO_VALIDATORC3
+        ],
+        dallas_gpio: [
+          { required: true, message: 'GPIO is required' },
+          GPIO_VALIDATORC3
+        ],
+        pbutton_gpio: [
+          { required: true, message: 'Button GPIO is required' },
+          GPIO_VALIDATORC3
+        ],
+        tx_gpio: [
+          { required: true, message: 'Tx GPIO is required' },
+          GPIO_VALIDATORC3
+        ],
+        rx_gpio: [
+          { required: true, message: 'Rx GPIO is required' },
+          GPIO_VALIDATORC3
+        ]
+      }),
+    ...(settings.board_profile === 'CUSTOM' &&
+      settings.platform === 'ESP32-S2' && {
+        led_gpio: [
+          { required: true, message: 'LED GPIO is required' },
+          GPIO_VALIDATORS2
+        ],
+        dallas_gpio: [
+          { required: true, message: 'GPIO is required' },
+          GPIO_VALIDATORS2
+        ],
+        pbutton_gpio: [
+          { required: true, message: 'Button GPIO is required' },
+          GPIO_VALIDATORS2
+        ],
+        tx_gpio: [
+          { required: true, message: 'Tx GPIO is required' },
+          GPIO_VALIDATORS2
+        ],
+        rx_gpio: [
+          { required: true, message: 'Rx GPIO is required' },
+          GPIO_VALIDATORS2
+        ]
+      }),
+    ...(settings.board_profile === 'CUSTOM' &&
+      settings.platform === 'ESP32-S3' && {
+        led_gpio: [
+          { required: true, message: 'LED GPIO is required' },
+          GPIO_VALIDATORS3
+        ],
+        dallas_gpio: [
+          { required: true, message: 'GPIO is required' },
+          GPIO_VALIDATORS3
+        ],
+        pbutton_gpio: [
+          { required: true, message: 'Button GPIO is required' },
+          GPIO_VALIDATORS3
+        ],
+        tx_gpio: [
+          { required: true, message: 'Tx GPIO is required' },
+          GPIO_VALIDATORS3
+        ],
+        rx_gpio: [
+          { required: true, message: 'Rx GPIO is required' },
+          GPIO_VALIDATORS3
+        ]
+      }),
+    ...(settings.syslog_enabled && {
+      syslog_host: [
+        { required: true, message: 'Host is required' },
+        IP_OR_HOSTNAME_VALIDATOR
+      ],
+      syslog_port: [
+        { required: true, message: 'Port is required' },
+        { type: 'number', min: 0, max: 65535, message: 'Invalid Port' }
+      ],
+      syslog_mark_interval: [
+        { required: true, message: 'Mark interval is required' },
+        { type: 'number', min: 0, max: 10, message: 'Must be between 0 and 10' }
+      ]
+    }),
+    ...(settings.shower_timer && {
+      shower_min_duration: [
+        {
+          type: 'number',
+          min: 10,
+          max: 360,
+          message: 'Time must be between 10 and 360 seconds'
+        }
+      ]
+    }),
+    ...(settings.shower_alert && {
+      shower_alert_trigger: [
+        {
+          type: 'number',
+          min: 1,
+          max: 20,
+          message: 'Time must be between 1 and 20 minutes'
+        }
+      ],
+      shower_alert_coldshot: [
+        {
+          type: 'number',
+          min: 1,
+          max: 10,
+          message: 'Time must be between 1 and 10 seconds'
+        }
+      ]
+    }),
+    ...(settings.remote_timeout_en && {
+      remote_timeout: [
+        {
+          type: 'number',
+          min: 1,
+          max: 240,
+          message: 'Timeout must be between 1 and 240 hours'
+        }
+      ]
+    })
+  });
+
+export const uniqueNameValidator = (schedule: ScheduleItem[], o_name?: string) => ({
+  validator(
+    rule: InternalRuleItem,
+    name: string,
+    callback: (error?: string) => void
+  ) {
+    if (
+      name !== '' &&
+      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
+      schedule.find((si) => si.name.toLowerCase() === name.toLowerCase())
+    ) {
+      callback('Name already in use');
+    } else {
+      callback();
+    }
+  }
+});
+
+export const schedulerItemValidation = (
+  schedule: ScheduleItem[],
+  scheduleItem: ScheduleItem
+) =>
+  new Schema({
+    name: [
+      {
+        type: 'string',
+        pattern: /^[a-zA-Z0-9_\\.]{0,19}$/,
+        message: "Must be <20 characters: alphanumeric, '_' or '.'"
+      },
+      ...[uniqueNameValidator(schedule, scheduleItem.o_name)]
+    ],
+    cmd: [
+      { required: true, message: 'Command is required' },
+      {
+        type: 'string',
+        min: 1,
+        max: 300,
+        message: 'Command must be 1-300 characters'
+      }
+    ]
+  });
+
+export const uniqueCustomNameValidator = (
+  entity: EntityItem[],
+  o_name?: string
+) => ({
+  validator(
+    rule: InternalRuleItem,
+    name: string,
+    callback: (error?: string) => void
+  ) {
+    if (
+      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
+      entity.find((ei) => ei.name.toLowerCase() === name.toLowerCase())
+    ) {
+      callback('Name already in use');
+    } else {
+      callback();
+    }
+  }
+});
+
+export const entityItemValidation = (entity: EntityItem[], entityItem: EntityItem) =>
+  new Schema({
+    name: [
+      { required: true, message: 'Name is required' },
+      {
+        type: 'string',
+        pattern: /^[a-zA-Z0-9_\\.]{1,19}$/,
+        message: "Must be <20 characters: alphanumeric, '_' or '.'"
+      },
+      ...[uniqueCustomNameValidator(entity, entityItem.o_name)]
+    ],
+    device_id: [
+      {
+        validator(
+          rule: InternalRuleItem,
+          value: string,
+          callback: (error?: string) => void
+        ) {
+          if (isNaN(parseInt(value, 16))) {
+            callback('Is required and must be in hex format');
+          }
+          callback();
+        }
+      }
+    ],
+    type_id: [
+      {
+        validator(
+          rule: InternalRuleItem,
+          value: string,
+          callback: (error?: string) => void
+        ) {
+          if (isNaN(parseInt(value, 16))) {
+            callback('Is required and must be in hex format');
+          }
+          callback();
+        }
+      }
+    ],
+    offset: [
+      { required: true, message: 'Offset is required' },
+      { type: 'number', min: 0, max: 255, message: 'Must be between 0 and 255' }
+    ]
+  });
+
+export const uniqueTemperatureNameValidator = (sensors: TemperatureSensor[]) => ({
+  validator(rule: InternalRuleItem, n: string, callback: (error?: string) => void) {
+    if (n !== '' && sensors.find((ts) => ts.n.toLowerCase() === n.toLowerCase())) {
+      callback('Name already in use');
+    } else {
+      callback();
+    }
+  }
+});
+
+export const temperatureSensorItemValidation = (sensors: TemperatureSensor[]) =>
+  new Schema({
+    n: [
+      {
+        type: 'string',
+        pattern: /^[a-zA-Z0-9_\\.]{0,19}$/,
+        message: "Must be <20 characters: alphanumeric, '_' or '.'"
+      },
+      ...[uniqueTemperatureNameValidator(sensors)]
+    ]
+  });
+
+export const isGPIOUniqueValidator = (sensors: AnalogSensor[]) => ({
+  validator(
+    rule: InternalRuleItem,
+    gpio: number,
+    callback: (error?: string) => void
+  ) {
+    if (sensors.find((as) => as.g === gpio)) {
+      callback('GPIO already in use');
+    } else {
+      callback();
+    }
+  }
+});
+
+export const uniqueAnalogNameValidator = (sensors: AnalogSensor[]) => ({
+  validator(rule: InternalRuleItem, n: string, callback: (error?: string) => void) {
+    if (n !== '' && sensors.find((as) => as.n.toLowerCase() === n.toLowerCase())) {
+      callback('Name already in use');
+    } else {
+      callback();
+    }
+  }
+});
+
+export const analogSensorItemValidation = (
+  sensors: AnalogSensor[],
+  creating: boolean,
+  platform: string
+) =>
+  new Schema({
+    n: [
+      {
+        type: 'string',
+        pattern: /^[a-zA-Z0-9_\\.]{0,19}$/,
+        message: "Must be <20 characters: alphanumeric, '_' or '.'"
+      },
+      ...[uniqueAnalogNameValidator(sensors)]
+    ],
+    g: [
+      { required: true, message: 'GPIO is required' },
+      platform === 'ESP32-S3'
+        ? GPIO_VALIDATORS3
+        : platform === 'ESP32-S2'
+          ? GPIO_VALIDATORS2
+          : platform === 'ESP32-C3'
+            ? GPIO_VALIDATORC3
+            : platform === 'ESP32R'
+              ? GPIO_VALIDATORR
+              : GPIO_VALIDATOR,
+      ...(creating ? [isGPIOUniqueValidator(sensors)] : [])
+    ]
+  });
+
+export const deviceValueItemValidation = (dv: DeviceValue) =>
+  new Schema({
+    v: [
+      { required: true, message: 'Value is required' },
+      {
+        validator(
+          rule: InternalRuleItem,
+          value: unknown,
+          callback: (error?: string) => void
+        ) {
+          if (
+            typeof value === 'number' &&
+            dv.m &&
+            dv.x &&
+            (value < dv.m || value > dv.x)
+          ) {
+            callback('Value out of range');
+          }
+          callback();
+        }
+      }
+    ]
+  });

interface/src/app/settings/APSettings.tsx

@@ -0,0 +1,236 @@
+import { useState } from 'react';
+import type { FC } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Button, Checkbox, MenuItem } from '@mui/material';
+
+import * as APApi from 'api/ap';
+
+import type { ValidateFieldsError } from 'async-validator';
+import {
+  BlockFormControlLabel,
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  SectionContent,
+  ValidatedPasswordField,
+  ValidatedTextField,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { range } from 'lodash-es';
+import type { APSettingsType } from 'types';
+import { APProvisionMode } from 'types';
+import { numberValue, updateValueDirty, useRest } from 'utils';
+import { createAPSettingsValidator, validate } from 'validators';
+
+export const isAPEnabled = ({ provision_mode }: APSettingsType) =>
+  provision_mode === APProvisionMode.AP_MODE_ALWAYS ||
+  provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
+
+const APSettings: FC = () => {
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest<APSettingsType>({
+    read: APApi.readAPSettings,
+    update: APApi.updateAPSettings
+  });
+
+  const { LL } = useI18nContext();
+
+  useLayoutTitle(LL.SETTINGS_OF(LL.ACCESS_POINT(0)));
+
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+    }
+
+    const validateAndSubmit = async () => {
+      try {
+        setFieldErrors(undefined);
+        await validate(createAPSettingsValidator(data), data);
+        await saveData();
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      }
+    };
+
+    return (
+      <>
+        <ValidatedTextField
+          fieldErrors={fieldErrors}
+          name="provision_mode"
+          label={LL.AP_PROVIDE() + '...'}
+          value={data.provision_mode}
+          fullWidth
+          select
+          variant="outlined"
+          onChange={updateFormValue}
+          margin="normal"
+        >
+          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>
+            {LL.AP_PROVIDE_TEXT_1()}
+          </MenuItem>
+          <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>
+            {LL.AP_PROVIDE_TEXT_2()}
+          </MenuItem>
+          <MenuItem value={APProvisionMode.AP_NEVER}>
+            {LL.AP_PROVIDE_TEXT_3()}
+          </MenuItem>
+        </ValidatedTextField>
+        {isAPEnabled(data) && (
+          <>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="ssid"
+              label={LL.ACCESS_POINT(2) + ' SSID'}
+              fullWidth
+              variant="outlined"
+              value={data.ssid}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <ValidatedPasswordField
+              fieldErrors={fieldErrors}
+              name="password"
+              label={LL.ACCESS_POINT(2) + ' ' + LL.PASSWORD()}
+              fullWidth
+              variant="outlined"
+              value={data.password}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="channel"
+              label={LL.AP_PREFERRED_CHANNEL()}
+              value={numberValue(data.channel)}
+              fullWidth
+              select
+              type="number"
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+            >
+              {range(1, 14).map((i) => (
+                <MenuItem key={i} value={i}>
+                  {i}
+                </MenuItem>
+              ))}
+            </ValidatedTextField>
+            <BlockFormControlLabel
+              control={
+                <Checkbox
+                  name="ssid_hidden"
+                  checked={data.ssid_hidden}
+                  onChange={updateFormValue}
+                />
+              }
+              label={LL.AP_HIDE_SSID()}
+            />
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="max_clients"
+              label={LL.AP_MAX_CLIENTS()}
+              value={numberValue(data.max_clients)}
+              fullWidth
+              select
+              type="number"
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+            >
+              {range(1, 9).map((i) => (
+                <MenuItem key={i} value={i}>
+                  {i}
+                </MenuItem>
+              ))}
+            </ValidatedTextField>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="local_ip"
+              label={LL.AP_LOCAL_IP()}
+              fullWidth
+              variant="outlined"
+              value={data.local_ip}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="gateway_ip"
+              label={LL.NETWORK_GATEWAY()}
+              fullWidth
+              variant="outlined"
+              value={data.gateway_ip}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="subnet_mask"
+              label={LL.NETWORK_SUBNET()}
+              fullWidth
+              variant="outlined"
+              value={data.subnet_mask}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </>
+        )}
+        {dirtyFlags && dirtyFlags.length !== 0 && (
+          <ButtonRow>
+            <Button
+              startIcon={<CancelIcon />}
+              disabled={saving}
+              variant="outlined"
+              color="primary"
+              type="submit"
+              onClick={loadData}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              disabled={saving}
+              variant="contained"
+              color="info"
+              type="submit"
+              onClick={validateAndSubmit}
+            >
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
+            </Button>
+          </ButtonRow>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {content()}
+    </SectionContent>
+  );
+};
+
+export default APSettings;

interface/src/app/settings/ApplicationSettings.tsx

@@ -0,0 +1,946 @@
+import { useState } from 'react';
+import type { FC } from 'react';
+import { toast } from 'react-toastify';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  Grid,
+  InputAdornment,
+  MenuItem,
+  TextField,
+  Typography
+} from '@mui/material';
+
+import * as SystemApi from 'api/system';
+
+import { useRequest } from 'alova';
+import RestartMonitor from 'app/status/RestartMonitor';
+import type { ValidateFieldsError } from 'async-validator';
+import {
+  BlockFormControlLabel,
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  MessageBox,
+  SectionContent,
+  ValidatedTextField,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { numberValue, updateValueDirty, useRest } from 'utils';
+import { validate } from 'validators';
+
+import * as EMSESP from '../main/api';
+import { BOARD_PROFILES } from '../main/types';
+import type { Settings } from '../main/types';
+import { createSettingsValidator } from '../main/validators';
+
+export function boardProfileSelectItems() {
+  return Object.keys(BOARD_PROFILES).map((code) => (
+    <MenuItem key={code} value={code}>
+      {BOARD_PROFILES[code]}
+    </MenuItem>
+  ));
+}
+
+const ApplicationSettings: FC = () => {
+  const {
+    loadData,
+    saveData,
+    saving,
+    updateDataValue,
+    data,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    errorMessage,
+    restartNeeded
+  } = useRest<Settings>({
+    read: EMSESP.readSettings,
+    update: EMSESP.writeSettings
+  });
+
+  const [restarting, setRestarting] = useState<boolean>();
+
+  const { LL } = useI18nContext();
+
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );
+
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
+  const {
+    loading: processingBoard,
+    send: readBoardProfile,
+    onSuccess: onSuccessBoardProfile
+  } = useRequest((boardProfile: string) => EMSESP.getBoardProfile(boardProfile), {
+    immediate: false
+  });
+
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
+
+  onSuccessBoardProfile((event) => {
+    const response = event.data as Settings;
+    updateDataValue({
+      ...data,
+      board_profile: response.board_profile,
+      led_gpio: response.led_gpio,
+      dallas_gpio: response.dallas_gpio,
+      rx_gpio: response.rx_gpio,
+      tx_gpio: response.tx_gpio,
+      pbutton_gpio: response.pbutton_gpio,
+      phy_type: response.phy_type,
+      eth_power: response.eth_power,
+      eth_phy_addr: response.eth_phy_addr,
+      eth_clock_mode: response.eth_clock_mode
+    });
+  });
+
+  const updateBoardProfile = async (board_profile: string) => {
+    await readBoardProfile(board_profile).catch((error: Error) => {
+      toast.error(error.message);
+    });
+  };
+
+  useLayoutTitle(LL.SETTINGS_OF(LL.APPLICATION()));
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+    }
+
+    const validateAndSubmit = async () => {
+      try {
+        setFieldErrors(undefined);
+        await validate(createSettingsValidator(data), data);
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      } finally {
+        await saveData();
+      }
+    };
+
+    const changeBoardProfile = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const boardProfile = event.target.value;
+      updateFormValue(event);
+      if (boardProfile === 'CUSTOM') {
+        updateDataValue({
+          ...data,
+          board_profile: boardProfile
+        });
+      } else {
+        void updateBoardProfile(boardProfile);
+      }
+    };
+
+    const restart = async () => {
+      await validateAndSubmit();
+      await restartCommand().catch((error: Error) => {
+        toast.error(error.message);
+      });
+      setRestarting(true);
+    };
+
+    return (
+      <>
+        <Typography sx={{ pb: 1 }} variant="h6" color="primary">
+          {LL.INTERFACE_BOARD_PROFILE()}
+        </Typography>
+        <Box color="warning.main">
+          <Typography variant="body2">{LL.BOARD_PROFILE_TEXT()}</Typography>
+        </Box>
+        <TextField
+          name="board_profile"
+          label={LL.BOARD_PROFILE()}
+          value={data.board_profile}
+          disabled={processingBoard}
+          fullWidth
+          variant="outlined"
+          onChange={changeBoardProfile}
+          margin="normal"
+          select
+        >
+          {boardProfileSelectItems()}
+          <Divider />
+          <MenuItem key={'CUSTOM'} value={'CUSTOM'}>
+            {LL.CUSTOM()}&hellip;
+          </MenuItem>
+        </TextField>
+        {data.board_profile === 'CUSTOM' && (
+          <>
+            <Grid
+              container
+              spacing={1}
+              sx={{ pt: 1 }}
+              direction="row"
+              justifyContent="flex-start"
+              alignItems="flex-start"
+            >
+              <Grid item xs={12} sm={6} md={4}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="rx_gpio"
+                  label={LL.GPIO_OF('Rx')}
+                  fullWidth
+                  variant="outlined"
+                  value={numberValue(data.rx_gpio)}
+                  type="number"
+                  onChange={updateFormValue}
+                  margin="normal"
+                  disabled={saving}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6} md={4}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="tx_gpio"
+                  label={LL.GPIO_OF('Tx')}
+                  fullWidth
+                  variant="outlined"
+                  value={numberValue(data.tx_gpio)}
+                  type="number"
+                  onChange={updateFormValue}
+                  margin="normal"
+                  disabled={saving}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6} md={4}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="pbutton_gpio"
+                  label={LL.GPIO_OF(LL.BUTTON())}
+                  fullWidth
+                  variant="outlined"
+                  value={numberValue(data.pbutton_gpio)}
+                  type="number"
+                  onChange={updateFormValue}
+                  margin="normal"
+                  disabled={saving}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6} md={4}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="dallas_gpio"
+                  label={
+                    LL.GPIO_OF(LL.TEMPERATURE()) + ' (0=' + LL.DISABLED(1) + ')'
+                  }
+                  fullWidth
+                  variant="outlined"
+                  value={numberValue(data.dallas_gpio)}
+                  type="number"
+                  onChange={updateFormValue}
+                  margin="normal"
+                  disabled={saving}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6} md={4}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="led_gpio"
+                  label={LL.GPIO_OF('LED') + ' (0=' + LL.DISABLED(1) + ')'}
+                  fullWidth
+                  variant="outlined"
+                  value={numberValue(data.led_gpio)}
+                  type="number"
+                  onChange={updateFormValue}
+                  margin="normal"
+                  disabled={saving}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                  name="phy_type"
+                  label={LL.PHY_TYPE()}
+                  disabled={saving}
+                  value={data.phy_type}
+                  fullWidth
+                  variant="outlined"
+                  onChange={updateFormValue}
+                  margin="normal"
+                  select
+                >
+                  <MenuItem value={0}>{LL.DISABLED(1)}</MenuItem>
+                  <MenuItem value={1}>LAN8720</MenuItem>
+                  <MenuItem value={2}>TLK110</MenuItem>
+                </TextField>
+              </Grid>
+            </Grid>
+            {data.phy_type !== 0 && (
+              <Grid
+                container
+                spacing={1}
+                sx={{ pt: 1 }}
+                direction="row"
+                justifyContent="flex-start"
+                alignItems="flex-start"
+              >
+                <Grid item xs={12} sm={6} md={4}>
+                  <TextField
+                    name="eth_power"
+                    label={LL.GPIO_OF('PHY Power') + ' (-1=' + LL.DISABLED(1) + ')'}
+                    fullWidth
+                    variant="outlined"
+                    value={numberValue(data.eth_power)}
+                    type="number"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    disabled={saving}
+                  />
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <TextField
+                    name="eth_phy_addr"
+                    label={LL.ADDRESS_OF('PHY I²C')}
+                    fullWidth
+                    variant="outlined"
+                    value={numberValue(data.eth_phy_addr)}
+                    type="number"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    disabled={saving}
+                  />
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <TextField
+                    name="eth_clock_mode"
+                    label="PHY Clk"
+                    disabled={saving}
+                    value={data.eth_clock_mode}
+                    fullWidth
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>GPIO0_IN</MenuItem>
+                    <MenuItem value={1}>GPIO0_OUT</MenuItem>
+                    <MenuItem value={2}>GPIO16_OUT</MenuItem>
+                    <MenuItem value={3}>GPIO17_OUT</MenuItem>
+                  </TextField>
+                </Grid>
+              </Grid>
+            )}
+          </>
+        )}
+        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+          {LL.SETTINGS_OF(LL.EMS_BUS(0))}
+        </Typography>
+        <Grid
+          container
+          spacing={1}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+        >
+          <Grid item xs={12} sm={6}>
+            <TextField
+              name="tx_mode"
+              label={LL.TX_MODE()}
+              disabled={saving}
+              value={data.tx_mode}
+              fullWidth
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              select
+            >
+              <MenuItem value={1}>EMS</MenuItem>
+              <MenuItem value={2}>EMS+</MenuItem>
+              <MenuItem value={3}>HT3</MenuItem>
+              <MenuItem value={4}>{LL.HARDWARE()}</MenuItem>
+            </TextField>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              name="ems_bus_id"
+              label={LL.ID_OF(LL.EMS_BUS(1))}
+              disabled={saving}
+              value={data.ems_bus_id}
+              fullWidth
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              select
+            >
+              <MenuItem value={0x0a}>Terminal (0x0A)</MenuItem>
+              <MenuItem value={0x0b}>Service Key (0x0B)</MenuItem>
+              <MenuItem value={0x0d}>Modem (0x0D)</MenuItem>
+              <MenuItem value={0x0e}>Converter (0x0E)</MenuItem>
+              <MenuItem value={0x0f}>Time Module (0x0F)</MenuItem>
+              <MenuItem value={0x48}>Gateway 1 (0x48)</MenuItem>
+              <MenuItem value={0x49}>Gateway 2 (0x49)</MenuItem>
+              <MenuItem value={0x4a}>Gateway 3 (0x4A)</MenuItem>
+              <MenuItem value={0x4b}>Gateway 4 (0x4B)</MenuItem>
+              <MenuItem value={0x4c}>Gateway 5 (0x4C)</MenuItem>
+              <MenuItem value={0x4d}>Gateway 7 (0x4D)</MenuItem>
+            </TextField>
+          </Grid>
+        </Grid>
+        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+          {LL.GENERAL_OPTIONS()}
+        </Typography>
+        <Grid item>
+          <TextField
+            name="locale"
+            label={LL.LANGUAGE_ENTITIES()}
+            disabled={saving}
+            value={data.locale}
+            fullWidth
+            variant="outlined"
+            onChange={updateFormValue}
+            margin="normal"
+            select
+          >
+            <MenuItem value="de">Deutsch (DE)</MenuItem>
+            <MenuItem value="en">English (EN)</MenuItem>
+            <MenuItem value="fr">Français (FR)</MenuItem>
+            <MenuItem value="it">Italiano (IT)</MenuItem>
+            <MenuItem value="nl">Nederlands (NL)</MenuItem>
+            <MenuItem value="no">Norsk (NO)</MenuItem>
+            <MenuItem value="pl">Polski (PL)</MenuItem>
+            <MenuItem value="sk">Slovenčina (SK)</MenuItem>
+            <MenuItem value="sv">Svenska (SV)</MenuItem>
+            <MenuItem value="tr">Türk (TR)</MenuItem>
+          </TextField>
+        </Grid>
+        {data.led_gpio !== 0 && (
+          <BlockFormControlLabel
+            control={
+              <Checkbox
+                checked={data.hide_led}
+                onChange={updateFormValue}
+                name="hide_led"
+              />
+            }
+            label={LL.HIDE_LED()}
+            disabled={saving}
+          />
+        )}
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.telnet_enabled}
+              onChange={updateFormValue}
+              name="telnet_enabled"
+            />
+          }
+          label={LL.ENABLE_TELNET()}
+          disabled={saving}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.analog_enabled}
+              onChange={updateFormValue}
+              name="analog_enabled"
+            />
+          }
+          label={LL.ENABLE_ANALOG()}
+          disabled={saving}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.fahrenheit}
+              onChange={updateFormValue}
+              name="fahrenheit"
+            />
+          }
+          label={LL.CONVERT_FAHRENHEIT()}
+          disabled={saving}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.notoken_api}
+              onChange={updateFormValue}
+              name="notoken_api"
+            />
+          }
+          label={LL.BYPASS_TOKEN()}
+          disabled={saving}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.readonly_mode}
+              onChange={updateFormValue}
+              name="readonly_mode"
+            />
+          }
+          label={LL.READONLY()}
+          disabled={saving}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.low_clock}
+              onChange={updateFormValue}
+              name="low_clock"
+            />
+          }
+          label={LL.UNDERCLOCK_CPU()}
+          disabled={saving}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.boiler_heatingoff}
+              onChange={updateFormValue}
+              name="boiler_heatingoff"
+            />
+          }
+          label={LL.HEATINGOFF()}
+          disabled={saving}
+        />
+        <Grid
+          container
+          spacing={1}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+        >
+          <Grid item xs={12} sm={6} md={4}>
+            <BlockFormControlLabel
+              control={
+                <Checkbox
+                  checked={data.remote_timeout_en}
+                  onChange={updateFormValue}
+                  name="remote_timeout_en"
+                />
+              }
+              label={LL.REMOTE_TIMEOUT_EN()}
+            />
+          </Grid>
+          {data.remote_timeout_en && (
+            <Grid item xs={12} sm={6} md={4}>
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="remote_timeout"
+                label={LL.REMOTE_TIMEOUT()}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
+                  )
+                }}
+                fullWidth
+                variant="outlined"
+                value={numberValue(data.remote_timeout)}
+                type="number"
+                onChange={updateFormValue}
+              />
+            </Grid>
+          )}
+        </Grid>
+        <Grid
+          container
+          spacing={0}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+        >
+          <BlockFormControlLabel
+            control={
+              <Checkbox
+                checked={data.shower_timer}
+                onChange={updateFormValue}
+                name="shower_timer"
+              />
+            }
+            label={LL.ENABLE_SHOWER_TIMER()}
+            disabled={saving}
+          />
+          <BlockFormControlLabel
+            control={
+              <Checkbox
+                checked={data.shower_alert}
+                onChange={updateFormValue}
+                name="shower_alert"
+              />
+            }
+            label={LL.ENABLE_SHOWER_ALERT()}
+            disabled={!data.shower_timer}
+          />
+        </Grid>
+        <Grid
+          container
+          sx={{ pt: 2 }}
+          rowSpacing={3}
+          spacing={1}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+        >
+          {data.shower_timer && (
+            <Grid item xs={12} sm={6}>
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="shower_min_duration"
+                label={LL.MIN_DURATION()}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                  )
+                }}
+                variant="outlined"
+                value={numberValue(data.shower_min_duration)}
+                fullWidth
+                type="number"
+                onChange={updateFormValue}
+              />
+            </Grid>
+          )}
+          {data.shower_alert && (
+            <>
+              <Grid item xs={12} sm={6}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="shower_alert_trigger"
+                  label={LL.TRIGGER_TIME()}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
+                    )
+                  }}
+                  variant="outlined"
+                  value={numberValue(data.shower_alert_trigger)}
+                  fullWidth
+                  type="number"
+                  onChange={updateFormValue}
+                  disabled={!data.shower_timer}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors}
+                  name="shower_alert_coldshot"
+                  label={LL.COLD_SHOT_DURATION()}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                    )
+                  }}
+                  variant="outlined"
+                  value={numberValue(data.shower_alert_coldshot)}
+                  fullWidth
+                  type="number"
+                  onChange={updateFormValue}
+                  disabled={!data.shower_timer}
+                />
+              </Grid>
+            </>
+          )}
+        </Grid>
+        <Typography sx={{ pt: 3 }} variant="h6" color="primary">
+          {LL.FORMATTING_OPTIONS()}
+        </Typography>
+        <Grid
+          container
+          spacing={1}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+        >
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="bool_dashboard"
+              label={LL.BOOLEAN_FORMAT_DASHBOARD()}
+              value={data.bool_dashboard}
+              fullWidth
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              select
+            >
+              <MenuItem value={1}>{LL.ONOFF()}</MenuItem>
+              <MenuItem value={2}>{LL.ONOFF_CAP()}</MenuItem>
+              <MenuItem value={3}>true/false</MenuItem>
+              <MenuItem value={5}>1/0</MenuItem>
+            </TextField>
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="bool_format"
+              label={LL.BOOLEAN_FORMAT_API()}
+              value={data.bool_format}
+              fullWidth
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              select
+            >
+              <MenuItem value={1}>{LL.ONOFF()}</MenuItem>
+              <MenuItem value={2}>{LL.ONOFF_CAP()}</MenuItem>
+              <MenuItem value={3}>&quot;true&quot;/&quot;false&quot;</MenuItem>
+              <MenuItem value={4}>true/false</MenuItem>
+              <MenuItem value={5}>&quot;1&quot;/&quot;0&quot;</MenuItem>
+              <MenuItem value={6}>1/0</MenuItem>
+            </TextField>
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="enum_format"
+              label={LL.ENUM_FORMAT()}
+              value={data.enum_format}
+              fullWidth
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              select
+            >
+              <MenuItem value={1}>{LL.VALUE(5)}</MenuItem>
+              <MenuItem value={2}>{LL.INDEX()}</MenuItem>
+            </TextField>
+          </Grid>
+        </Grid>
+        {data.dallas_gpio !== 0 && (
+          <>
+            <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+              {LL.TEMP_SENSORS()}
+            </Typography>
+            <BlockFormControlLabel
+              control={
+                <Checkbox
+                  checked={data.dallas_parasite}
+                  onChange={updateFormValue}
+                  name="dallas_parasite"
+                />
+              }
+              label={LL.ENABLE_PARASITE()}
+              disabled={saving}
+            />
+          </>
+        )}
+        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+          {LL.LOGGING()}
+        </Typography>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.trace_raw}
+              onChange={updateFormValue}
+              name="trace_raw"
+            />
+          }
+          label={LL.LOG_HEX()}
+          disabled={saving}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.syslog_enabled}
+              onChange={updateFormValue}
+              name="syslog_enabled"
+              disabled={saving}
+            />
+          }
+          label={LL.ENABLE_SYSLOG()}
+        />
+        {data.syslog_enabled && (
+          <Grid
+            container
+            spacing={1}
+            direction="row"
+            justifyContent="flex-start"
+            alignItems="flex-start"
+          >
+            <Grid item xs={12} sm={6}>
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="syslog_host"
+                label="Host"
+                fullWidth
+                variant="outlined"
+                value={data.syslog_host}
+                onChange={updateFormValue}
+                margin="normal"
+                disabled={saving}
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="syslog_port"
+                label="Port"
+                fullWidth
+                variant="outlined"
+                value={numberValue(data.syslog_port)}
+                type="number"
+                onChange={updateFormValue}
+                margin="normal"
+                disabled={saving}
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TextField
+                name="syslog_level"
+                label={LL.LOG_LEVEL()}
+                value={data.syslog_level}
+                fullWidth
+                variant="outlined"
+                onChange={updateFormValue}
+                margin="normal"
+                select
+                disabled={saving}
+              >
+                <MenuItem value={-1}>OFF</MenuItem>
+                <MenuItem value={3}>ERR</MenuItem>
+                <MenuItem value={5}>NOTICE</MenuItem>
+                <MenuItem value={6}>INFO</MenuItem>
+                <MenuItem value={7}>DEBUG</MenuItem>
+                <MenuItem value={9}>ALL</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="syslog_mark_interval"
+                label={LL.MARK_INTERVAL()}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                  )
+                }}
+                fullWidth
+                variant="outlined"
+                value={numberValue(data.syslog_mark_interval)}
+                type="number"
+                onChange={updateFormValue}
+                margin="normal"
+                disabled={saving}
+              />
+            </Grid>
+          </Grid>
+        )}
+        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+          Modbus
+        </Typography>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.modbus_enabled}
+              onChange={updateFormValue}
+              name="modbus_enabled"
+              disabled={saving}
+            />
+          }
+          label={LL.ENABLE_MODBUS()}
+        />
+        {data.modbus_enabled && (
+          <Grid
+            container
+            spacing={1}
+            direction="row"
+            justifyContent="flex-start"
+            alignItems="flex-start"
+          >
+            <Grid item xs={12} sm={6}>
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="modbus_max_clients"
+                label={LL.AP_MAX_CLIENTS()}
+                fullWidth
+                variant="outlined"
+                value={numberValue(data.modbus_max_clients)}
+                type="number"
+                onChange={updateFormValue}
+                margin="normal"
+                disabled={saving}
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="modbus_port"
+                label="Port"
+                fullWidth
+                variant="outlined"
+                value={numberValue(data.modbus_port)}
+                type="number"
+                onChange={updateFormValue}
+                margin="normal"
+                disabled={saving}
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="modbus_timeout"
+                label="Timeout"
+                InputProps={{
+                  endAdornment: <InputAdornment position="end">ms</InputAdornment>
+                }}
+                fullWidth
+                variant="outlined"
+                value={numberValue(data.modbus_timeout)}
+                type="number"
+                onChange={updateFormValue}
+                margin="normal"
+                disabled={saving}
+              />
+            </Grid>
+          </Grid>
+        )}
+        {restartNeeded && (
+          <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
+            <Button
+              startIcon={<PowerSettingsNewIcon />}
+              variant="contained"
+              color="error"
+              onClick={restart}
+            >
+              {LL.RESTART()}
+            </Button>
+          </MessageBox>
+        )}
+        {!restartNeeded && dirtyFlags && dirtyFlags.length !== 0 && (
+          <ButtonRow>
+            <Button
+              startIcon={<CancelIcon />}
+              disabled={saving}
+              variant="outlined"
+              color="primary"
+              type="submit"
+              onClick={loadData}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              disabled={saving}
+              variant="contained"
+              color="info"
+              type="submit"
+              onClick={validateAndSubmit}
+            >
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
+            </Button>
+          </ButtonRow>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {restarting ? <RestartMonitor /> : content()}
+    </SectionContent>
+  );
+};
+
+export default ApplicationSettings;

interface/src/app/settings/MqttSettings.tsx

@@ -0,0 +1,578 @@
+import { useState } from 'react';
+import type { FC } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Button,
+  Checkbox,
+  Grid,
+  InputAdornment,
+  MenuItem,
+  TextField,
+  Typography
+} from '@mui/material';
+
+import * as MqttApi from 'api/mqtt';
+
+import type { ValidateFieldsError } from 'async-validator';
+import {
+  BlockFormControlLabel,
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  SectionContent,
+  ValidatedPasswordField,
+  ValidatedTextField,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { MqttSettingsType } from 'types';
+import { numberValue, updateValueDirty, useRest } from 'utils';
+import { createMqttSettingsValidator, validate } from 'validators';
+
+const MqttSettings: FC = () => {
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest<MqttSettingsType>({
+    read: MqttApi.readMqttSettings,
+    update: MqttApi.updateMqttSettings
+  });
+
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.SETTINGS_OF('MQTT'));
+
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+    }
+
+    const validateAndSubmit = async () => {
+      try {
+        setFieldErrors(undefined);
+        await validate(createMqttSettingsValidator(data), data);
+        await saveData();
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      }
+    };
+
+    return (
+      <>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="enabled"
+              checked={data.enabled}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.ENABLE_MQTT()}
+        />
+        <Grid
+          container
+          spacing={1}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+        >
+          <Grid item xs={12} sm={6}>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="host"
+              label={LL.ADDRESS_OF(LL.BROKER())}
+              fullWidth
+              multiline
+              variant="outlined"
+              value={data.host}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="port"
+              label="Port"
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.port)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="base"
+              label={LL.BASE_TOPIC()}
+              fullWidth
+              variant="outlined"
+              value={data.base}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              name="client_id"
+              label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
+              fullWidth
+              variant="outlined"
+              value={data.client_id}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              name="username"
+              label={LL.USERNAME(0)}
+              fullWidth
+              variant="outlined"
+              value={data.username}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <ValidatedPasswordField
+              name="password"
+              label={LL.PASSWORD()}
+              fullWidth
+              variant="outlined"
+              value={data.password}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="keep_alive"
+              label="Keep Alive"
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
+              }}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.keep_alive)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              name="mqtt_qos"
+              label="QoS"
+              value={data.mqtt_qos}
+              fullWidth
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              select
+            >
+              <MenuItem value={0}>0</MenuItem>
+              <MenuItem value={1}>1</MenuItem>
+              <MenuItem value={2}>2</MenuItem>
+            </TextField>
+          </Grid>
+        </Grid>
+        {data.enableTLS !== undefined && (
+          <BlockFormControlLabel
+            control={
+              <Checkbox
+                name="enableTLS"
+                checked={data.enableTLS}
+                onChange={updateFormValue}
+              />
+            }
+            label={LL.ENABLE_TLS()}
+          />
+        )}
+        {data.enableTLS === true && (
+          <ValidatedPasswordField
+            name="rootCA"
+            label={LL.CERT()}
+            fullWidth
+            variant="outlined"
+            value={data.rootCA}
+            onChange={updateFormValue}
+            margin="normal"
+          />
+        )}
+
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="clean_session"
+              checked={data.clean_session}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.MQTT_CLEAN_SESSION()}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="mqtt_retain"
+              checked={data.mqtt_retain}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.MQTT_RETAIN_FLAG()}
+        />
+
+        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+          {LL.FORMATTING()}
+        </Typography>
+        <TextField
+          name="nested_format"
+          label={LL.MQTT_FORMAT()}
+          value={data.nested_format}
+          fullWidth
+          variant="outlined"
+          onChange={updateFormValue}
+          margin="normal"
+          select
+        >
+          <MenuItem value={1}>{LL.MQTT_NEST_1()}</MenuItem>
+          <MenuItem value={2}>{LL.MQTT_NEST_2()}</MenuItem>
+        </TextField>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="send_response"
+              checked={data.send_response}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.MQTT_RESPONSE()}
+        />
+        {!data.ha_enabled && (
+          <Grid
+            container
+            rowSpacing={-1}
+            spacing={1}
+            direction="row"
+            justifyContent="flex-start"
+            alignItems="flex-start"
+          >
+            <Grid item>
+              <BlockFormControlLabel
+                control={
+                  <Checkbox
+                    name="publish_single"
+                    checked={data.publish_single}
+                    onChange={updateFormValue}
+                  />
+                }
+                label={LL.MQTT_PUBLISH_TEXT_1()}
+              />
+            </Grid>
+            {data.publish_single && (
+              <Grid item>
+                <BlockFormControlLabel
+                  control={
+                    <Checkbox
+                      name="publish_single2cmd"
+                      checked={data.publish_single2cmd}
+                      onChange={updateFormValue}
+                    />
+                  }
+                  label={LL.MQTT_PUBLISH_TEXT_2()}
+                />
+              </Grid>
+            )}
+          </Grid>
+        )}
+        {!data.publish_single && (
+          <Grid
+            container
+            spacing={1}
+            direction="row"
+            justifyContent="flex-start"
+            alignItems="flex-start"
+          >
+            <Grid item>
+              <BlockFormControlLabel
+                control={
+                  <Checkbox
+                    name="ha_enabled"
+                    checked={data.ha_enabled}
+                    onChange={updateFormValue}
+                  />
+                }
+                label={LL.MQTT_PUBLISH_TEXT_3()}
+              />
+            </Grid>
+            {data.ha_enabled && (
+              <Grid
+                container
+                sx={{ pl: 1 }}
+                spacing={1}
+                direction="row"
+                justifyContent="flex-start"
+                alignItems="flex-start"
+              >
+                <Grid item xs={12} sm={6} md={4}>
+                  <TextField
+                    name="discovery_type"
+                    label={LL.MQTT_PUBLISH_TEXT_5()}
+                    value={data.discovery_type}
+                    fullWidth
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>Home Assistant</MenuItem>
+                    <MenuItem value={1}>Domoticz</MenuItem>
+                    <MenuItem value={2}>Domoticz (latest)</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <TextField
+                    name="discovery_prefix"
+                    label={LL.MQTT_PUBLISH_TEXT_4()}
+                    fullWidth
+                    variant="outlined"
+                    value={data.discovery_prefix}
+                    onChange={updateFormValue}
+                    margin="normal"
+                  />
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <TextField
+                    name="entity_format"
+                    label={LL.MQTT_ENTITY_FORMAT()}
+                    value={data.entity_format}
+                    fullWidth
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
+                    <MenuItem value={3}>
+                      {LL.MQTT_ENTITY_FORMAT_1()}&nbsp;(v3.6)
+                    </MenuItem>
+                    <MenuItem value={4}>
+                      {LL.MQTT_ENTITY_FORMAT_2()}&nbsp;(v3.6)
+                    </MenuItem>
+                    <MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
+                    <MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
+                  </TextField>
+                </Grid>
+              </Grid>
+            )}
+          </Grid>
+        )}
+        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+          {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
+        </Typography>
+        <Grid
+          container
+          spacing={1}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+        >
+          <Grid item xs={12} sm={6} md={4}>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="publish_time_heartbeat"
+              label="Heartbeat"
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
+              }}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.publish_time_heartbeat)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="publish_time_boiler"
+              label={LL.MQTT_INT_BOILER()}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
+              }}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.publish_time_boiler)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="publish_time_thermostat"
+              label={LL.MQTT_INT_THERMOSTATS()}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
+              }}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.publish_time_thermostat)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="publish_time_solar"
+              label={LL.MQTT_INT_SOLAR()}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
+              }}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.publish_time_solar)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="publish_time_mixer"
+              label={LL.MQTT_INT_MIXER()}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
+              }}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.publish_time_mixer)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="publish_time_water"
+              label={LL.MQTT_INT_WATER()}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
+              }}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.publish_time_water)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="publish_time_sensor"
+              label={LL.TEMP_SENSORS()}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
+              }}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.publish_time_sensor)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
+              name="publish_time_other"
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+                )
+              }}
+              label={LL.DEFAULT(0)}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.publish_time_other)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+        </Grid>
+
+        {dirtyFlags && dirtyFlags.length !== 0 && (
+          <ButtonRow>
+            <Button
+              startIcon={<CancelIcon />}
+              disabled={saving}
+              variant="outlined"
+              color="primary"
+              type="submit"
+              onClick={loadData}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              disabled={saving}
+              variant="contained"
+              color="info"
+              type="submit"
+              onClick={validateAndSubmit}
+            >
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
+            </Button>
+          </ButtonRow>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {content()}
+    </SectionContent>
+  );
+};
+
+export default MqttSettings;

interface/src/app/settings/NTPSettings.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'react';
+import type { FC } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Button, Checkbox, MenuItem } from '@mui/material';
+
+import * as NTPApi from 'api/ntp';
+
+import { updateState } from 'alova';
+import type { ValidateFieldsError } from 'async-validator';
+import {
+  BlockFormControlLabel,
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  SectionContent,
+  ValidatedTextField,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { NTPSettingsType } from 'types';
+import { updateValueDirty, useRest } from 'utils';
+import { validate } from 'validators';
+import { NTP_SETTINGS_VALIDATOR } from 'validators/ntp';
+
+import { TIME_ZONES, selectedTimeZone, timeZoneSelectItems } from './TZ';
+
+const NTPSettings: FC = () => {
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest<NTPSettingsType>({
+    read: NTPApi.readNTPSettings,
+    update: NTPApi.updateNTPSettings
+  });
+
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.SETTINGS_OF('NTP'));
+
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );
+
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+    }
+
+    const validateAndSubmit = async () => {
+      try {
+        setFieldErrors(undefined);
+        await validate(NTP_SETTINGS_VALIDATOR, data);
+        await saveData();
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      }
+    };
+
+    const changeTimeZone = (event: React.ChangeEvent<HTMLInputElement>) => {
+      updateFormValue(event);
+
+      updateState('ntpSettings', (settings: NTPSettingsType) => ({
+        ...settings,
+        tz_label: event.target.value,
+        tz_format: TIME_ZONES[event.target.value]
+      }));
+    };
+
+    return (
+      <>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="enabled"
+              checked={data.enabled}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.ENABLE_NTP()}
+        />
+        <ValidatedTextField
+          fieldErrors={fieldErrors}
+          name="server"
+          label={LL.NTP_SERVER()}
+          fullWidth
+          variant="outlined"
+          value={data.server}
+          onChange={updateFormValue}
+          margin="normal"
+        />
+        <ValidatedTextField
+          fieldErrors={fieldErrors}
+          name="tz_label"
+          label={LL.TIME_ZONE()}
+          fullWidth
+          variant="outlined"
+          value={selectedTimeZone(data.tz_label, data.tz_format)}
+          onChange={changeTimeZone}
+          margin="normal"
+          select
+        >
+          <MenuItem disabled>{LL.TIME_ZONE()}...</MenuItem>
+          {timeZoneSelectItems()}
+        </ValidatedTextField>
+        {dirtyFlags && dirtyFlags.length !== 0 && (
+          <ButtonRow>
+            <Button
+              startIcon={<CancelIcon />}
+              disabled={saving}
+              variant="outlined"
+              color="primary"
+              type="submit"
+              onClick={loadData}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              disabled={saving}
+              variant="contained"
+              color="info"
+              type="submit"
+              onClick={validateAndSubmit}
+            >
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
+            </Button>
+          </ButtonRow>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {content()}
+    </SectionContent>
+  );
+};
+
+export default NTPSettings;

interface/src/app/settings/Settings.tsx

@@ -0,0 +1,163 @@
+import { type FC, useState } from 'react';
+
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import CancelIcon from '@mui/icons-material/Cancel';
+import DeviceHubIcon from '@mui/icons-material/DeviceHub';
+import ImportExportIcon from '@mui/icons-material/ImportExport';
+import LockIcon from '@mui/icons-material/Lock';
+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 ViewModuleIcon from '@mui/icons-material/ViewModule';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  List
+} from '@mui/material';
+
+import * as SystemApi from 'api/system';
+
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova';
+import { SectionContent, useLayoutTitle } from 'components';
+import ListMenuItem from 'components/layout/ListMenuItem';
+import { useI18nContext } from 'i18n/i18n-react';
+
+const Settings: FC = () => {
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.SETTINGS(0));
+
+  const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
+
+  const { send: factoryResetCommand } = useRequest(SystemApi.factoryReset(), {
+    immediate: false
+  });
+
+  const factoryReset = async () => {
+    await factoryResetCommand();
+    setConfirmFactoryReset(false);
+  };
+
+  const renderFactoryResetDialog = () => (
+    <Dialog
+      sx={dialogStyle}
+      open={confirmFactoryReset}
+      onClose={() => setConfirmFactoryReset(false)}
+    >
+      <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
+      <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmFactoryReset(false)}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<SettingsBackupRestoreIcon />}
+          variant="outlined"
+          onClick={factoryReset}
+          color="error"
+        >
+          {LL.FACTORY_RESET()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
+  const content = () => (
+    <>
+      <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
+        <ListMenuItem
+          icon={TuneIcon}
+          bgcolor="#134ba2"
+          label={LL.SETTINGS_OF(LL.APPLICATION())}
+          text={LL.APPLICATION_SETTINGS_1()}
+          to="application"
+        />
+
+        <ListMenuItem
+          icon={SettingsEthernetIcon}
+          bgcolor="#40828f"
+          label={LL.SETTINGS_OF(LL.NETWORK(0))}
+          text={LL.CONFIGURE(LL.SETTINGS_OF(LL.NETWORK(1)))}
+          to="network"
+        />
+
+        <ListMenuItem
+          icon={SettingsInputAntennaIcon}
+          bgcolor="#5f9a5f"
+          label={LL.SETTINGS_OF(LL.ACCESS_POINT(0))}
+          text={LL.CONFIGURE(LL.ACCESS_POINT(1))}
+          to="ap"
+        />
+
+        <ListMenuItem
+          icon={AccessTimeIcon}
+          bgcolor="#c5572c"
+          label={LL.SETTINGS_OF('NTP')}
+          text={LL.CONFIGURE(LL.LOCAL_TIME(1))}
+          to="ntp"
+        />
+
+        <ListMenuItem
+          icon={DeviceHubIcon}
+          bgcolor="#68374d"
+          label={LL.SETTINGS_OF('MQTT')}
+          text={LL.CONFIGURE('MQTT')}
+          to="mqtt"
+        />
+
+        <ListMenuItem
+          icon={LockIcon}
+          label={LL.SETTINGS_OF(LL.SECURITY(0))}
+          text={LL.SECURITY_1()}
+          to="security"
+        />
+
+        <ListMenuItem
+          icon={ViewModuleIcon}
+          bgcolor="#efc34b"
+          label="Modules"
+          text="Activate or deactivate external modules"
+          to="modules"
+        />
+
+        <Divider />
+
+        <ListMenuItem
+          icon={ImportExportIcon}
+          bgcolor="#5d89f7"
+          label={LL.UPLOAD_DOWNLOAD()}
+          text={LL.UPLOAD_DOWNLOAD_1()}
+          to="upload"
+        />
+      </List>
+
+      {renderFactoryResetDialog()}
+
+      <Box mt={2} display="flex" flexWrap="wrap">
+        <Button
+          startIcon={<SettingsBackupRestoreIcon />}
+          variant="outlined"
+          onClick={() => setConfirmFactoryReset(true)}
+          color="error"
+        >
+          {LL.FACTORY_RESET()}
+        </Button>
+      </Box>
+    </>
+  );
+
+  return <SectionContent>{content()}</SectionContent>;
+};
+
+export default Settings;

interface/src/app/settings/TZ.tsx

@@ -0,0 +1,478 @@
+import { MenuItem } from '@mui/material';
+
+type TimeZones = Record<string, string>;
+
+export const TIME_ZONES: TimeZones = {
+  'Africa/Abidjan': 'GMT0',
+  'Africa/Accra': 'GMT0',
+  'Africa/Addis_Ababa': 'EAT-3',
+  'Africa/Algiers': 'CET-1',
+  'Africa/Asmara': 'EAT-3',
+  'Africa/Bamako': 'GMT0',
+  'Africa/Bangui': 'WAT-1',
+  'Africa/Banjul': 'GMT0',
+  'Africa/Bissau': 'GMT0',
+  'Africa/Blantyre': 'CAT-2',
+  'Africa/Brazzaville': 'WAT-1',
+  'Africa/Bujumbura': 'CAT-2',
+  'Africa/Cairo': 'EET-2',
+  'Africa/Casablanca': 'UNK-1',
+  'Africa/Ceuta': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Africa/Conakry': 'GMT0',
+  'Africa/Dakar': 'GMT0',
+  'Africa/Dar_es_Salaam': 'EAT-3',
+  'Africa/Djibouti': 'EAT-3',
+  'Africa/Douala': 'WAT-1',
+  'Africa/El_Aaiun': 'UNK-1',
+  'Africa/Freetown': 'GMT0',
+  'Africa/Gaborone': 'CAT-2',
+  'Africa/Harare': 'CAT-2',
+  'Africa/Johannesburg': 'SAST-2',
+  'Africa/Juba': 'EAT-3',
+  'Africa/Kampala': 'EAT-3',
+  'Africa/Khartoum': 'CAT-2',
+  'Africa/Kigali': 'CAT-2',
+  'Africa/Kinshasa': 'WAT-1',
+  'Africa/Lagos': 'WAT-1',
+  'Africa/Libreville': 'WAT-1',
+  'Africa/Lome': 'GMT0',
+  'Africa/Luanda': 'WAT-1',
+  'Africa/Lubumbashi': 'CAT-2',
+  'Africa/Lusaka': 'CAT-2',
+  'Africa/Malabo': 'WAT-1',
+  'Africa/Maputo': 'CAT-2',
+  'Africa/Maseru': 'SAST-2',
+  'Africa/Mbabane': 'SAST-2',
+  'Africa/Mogadishu': 'EAT-3',
+  'Africa/Monrovia': 'GMT0',
+  'Africa/Nairobi': 'EAT-3',
+  'Africa/Ndjamena': 'WAT-1',
+  'Africa/Niamey': 'WAT-1',
+  'Africa/Nouakchott': 'GMT0',
+  'Africa/Ouagadougou': 'GMT0',
+  'Africa/Porto-Novo': 'WAT-1',
+  'Africa/Sao_Tome': 'GMT0',
+  'Africa/Tripoli': 'EET-2',
+  'Africa/Tunis': 'CET-1',
+  'Africa/Windhoek': 'CAT-2',
+  'America/Adak': 'HST10HDT,M3.2.0,M11.1.0',
+  'America/Anchorage': 'AKST9AKDT,M3.2.0,M11.1.0',
+  'America/Anguilla': 'AST4',
+  'America/Antigua': 'AST4',
+  'America/Araguaina': 'UNK3',
+  'America/Argentina/Buenos_Aires': 'UNK3',
+  'America/Argentina/Catamarca': 'UNK3',
+  'America/Argentina/Cordoba': 'UNK3',
+  'America/Argentina/Jujuy': 'UNK3',
+  'America/Argentina/La_Rioja': 'UNK3',
+  'America/Argentina/Mendoza': 'UNK3',
+  'America/Argentina/Rio_Gallegos': 'UNK3',
+  'America/Argentina/Salta': 'UNK3',
+  'America/Argentina/San_Juan': 'UNK3',
+  'America/Argentina/San_Luis': 'UNK3',
+  'America/Argentina/Tucuman': 'UNK3',
+  'America/Argentina/Ushuaia': 'UNK3',
+  'America/Aruba': 'AST4',
+  'America/Asuncion': 'UNK4UNK,M10.1.0/0,M3.4.0/0',
+  'America/Atikokan': 'EST5',
+  'America/Bahia': 'UNK3',
+  'America/Bahia_Banderas': 'CST6CDT,M4.1.0,M10.5.0',
+  'America/Barbados': 'AST4',
+  'America/Belem': 'UNK3',
+  'America/Belize': 'CST6',
+  'America/Blanc-Sablon': 'AST4',
+  'America/Boa_Vista': 'UNK4',
+  'America/Bogota': 'UNK5',
+  'America/Boise': 'MST7MDT,M3.2.0,M11.1.0',
+  'America/Cambridge_Bay': 'MST7MDT,M3.2.0,M11.1.0',
+  'America/Campo_Grande': 'UNK4',
+  'America/Cancun': 'EST5',
+  'America/Caracas': 'UNK4',
+  'America/Cayenne': 'UNK3',
+  'America/Cayman': 'EST5',
+  'America/Chicago': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Chihuahua': 'MST7MDT,M4.1.0,M10.5.0',
+  'America/Costa_Rica': 'CST6',
+  'America/Creston': 'MST7',
+  'America/Cuiaba': 'UNK4',
+  'America/Curacao': 'AST4',
+  'America/Danmarkshavn': 'GMT0',
+  'America/Dawson': 'MST7',
+  'America/Dawson_Creek': 'MST7',
+  'America/Denver': 'MST7MDT,M3.2.0,M11.1.0',
+  'America/Detroit': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Dominica': 'AST4',
+  'America/Edmonton': 'MST7MDT,M3.2.0,M11.1.0',
+  'America/Eirunepe': 'UNK5',
+  'America/El_Salvador': 'CST6',
+  'America/Fort_Nelson': 'MST7',
+  'America/Fortaleza': 'UNK3',
+  'America/Glace_Bay': 'AST4ADT,M3.2.0,M11.1.0',
+  'America/Godthab': 'UNK3UNK,M3.5.0/-2,M10.5.0/-1',
+  'America/Goose_Bay': 'AST4ADT,M3.2.0,M11.1.0',
+  'America/Grand_Turk': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Grenada': 'AST4',
+  'America/Guadeloupe': 'AST4',
+  'America/Guatemala': 'CST6',
+  'America/Guayaquil': 'UNK5',
+  'America/Guyana': 'UNK4',
+  'America/Halifax': 'AST4ADT,M3.2.0,M11.1.0',
+  'America/Havana': 'CST5CDT,M3.2.0/0,M11.1.0/1',
+  'America/Hermosillo': 'MST7',
+  'America/Indiana/Indianapolis': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Indiana/Knox': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Indiana/Marengo': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Indiana/Petersburg': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Indiana/Tell_City': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Indiana/Vevay': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Indiana/Vincennes': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Indiana/Winamac': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Inuvik': 'MST7MDT,M3.2.0,M11.1.0',
+  'America/Iqaluit': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Jamaica': 'EST5',
+  'America/Juneau': 'AKST9AKDT,M3.2.0,M11.1.0',
+  'America/Kentucky/Louisville': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Kentucky/Monticello': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Kralendijk': 'AST4',
+  'America/La_Paz': 'UNK4',
+  'America/Lima': 'UNK5',
+  'America/Los_Angeles': 'PST8PDT,M3.2.0,M11.1.0',
+  'America/Lower_Princes': 'AST4',
+  'America/Maceio': 'UNK3',
+  'America/Managua': 'CST6',
+  'America/Manaus': 'UNK4',
+  'America/Marigot': 'AST4',
+  'America/Martinique': 'AST4',
+  'America/Matamoros': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Mazatlan': 'MST7MDT,M4.1.0,M10.5.0',
+  'America/Menominee': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Merida': 'CST6CDT,M4.1.0,M10.5.0',
+  'America/Metlakatla': 'AKST9AKDT,M3.2.0,M11.1.0',
+  'America/Mexico_City': 'CST6CDT,M4.1.0,M10.5.0',
+  'America/Miquelon': 'UNK3UNK,M3.2.0,M11.1.0',
+  'America/Moncton': 'AST4ADT,M3.2.0,M11.1.0',
+  'America/Monterrey': 'CST6CDT,M4.1.0,M10.5.0',
+  'America/Montevideo': 'UNK3',
+  'America/Montreal': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Montserrat': 'AST4',
+  'America/Nassau': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/New_York': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Nipigon': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Nome': 'AKST9AKDT,M3.2.0,M11.1.0',
+  'America/Noronha': 'UNK2',
+  'America/North_Dakota/Beulah': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/North_Dakota/Center': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/North_Dakota/New_Salem': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Ojinaga': 'MST7MDT,M3.2.0,M11.1.0',
+  'America/Panama': 'EST5',
+  'America/Pangnirtung': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Paramaribo': 'UNK3',
+  'America/Phoenix': 'MST7',
+  'America/Port-au-Prince': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Port_of_Spain': 'AST4',
+  'America/Porto_Velho': 'UNK4',
+  'America/Puerto_Rico': 'AST4',
+  'America/Punta_Arenas': 'UNK3',
+  'America/Rainy_River': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Rankin_Inlet': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Recife': 'UNK3',
+  'America/Regina': 'CST6',
+  'America/Resolute': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Rio_Branco': 'UNK5',
+  'America/Santarem': 'UNK3',
+  'America/Santiago': 'UNK4UNK,M9.1.6/24,M4.1.6/24',
+  'America/Santo_Domingo': 'AST4',
+  'America/Sao_Paulo': 'UNK3',
+  'America/Scoresbysund': 'UNK1UNK,M3.5.0/0,M10.5.0/1',
+  'America/Sitka': 'AKST9AKDT,M3.2.0,M11.1.0',
+  'America/St_Barthelemy': 'AST4',
+  'America/St_Johns': 'NST3:30NDT,M3.2.0,M11.1.0',
+  'America/St_Kitts': 'AST4',
+  'America/St_Lucia': 'AST4',
+  'America/St_Thomas': 'AST4',
+  'America/St_Vincent': 'AST4',
+  'America/Swift_Current': 'CST6',
+  'America/Tegucigalpa': 'CST6',
+  'America/Thule': 'AST4ADT,M3.2.0,M11.1.0',
+  'America/Thunder_Bay': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Tijuana': 'PST8PDT,M3.2.0,M11.1.0',
+  'America/Toronto': 'EST5EDT,M3.2.0,M11.1.0',
+  'America/Tortola': 'AST4',
+  'America/Vancouver': 'PST8PDT,M3.2.0,M11.1.0',
+  'America/Whitehorse': 'MST7',
+  'America/Winnipeg': 'CST6CDT,M3.2.0,M11.1.0',
+  'America/Yakutat': 'AKST9AKDT,M3.2.0,M11.1.0',
+  'America/Yellowknife': 'MST7MDT,M3.2.0,M11.1.0',
+  'Antarctica/Casey': 'UNK-8',
+  'Antarctica/Davis': 'UNK-7',
+  'Antarctica/DumontDUrville': 'UNK-10',
+  'Antarctica/Macquarie': 'UNK-11',
+  'Antarctica/Mawson': 'UNK-5',
+  'Antarctica/McMurdo': 'NZST-12NZDT,M9.5.0,M4.1.0/3',
+  'Antarctica/Palmer': 'UNK3',
+  'Antarctica/Rothera': 'UNK3',
+  'Antarctica/Syowa': 'UNK-3',
+  'Antarctica/Troll': 'UNK0UNK-2,M3.5.0/1,M10.5.0/3',
+  'Antarctica/Vostok': 'UNK-6',
+  'Arctic/Longyearbyen': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Asia/Aden': 'UNK-3',
+  'Asia/Almaty': 'UNK-6',
+  'Asia/Amman': 'EET-2EEST,M3.5.4/24,M10.5.5/1',
+  'Asia/Anadyr': 'UNK-12',
+  'Asia/Aqtau': 'UNK-5',
+  'Asia/Aqtobe': 'UNK-5',
+  'Asia/Ashgabat': 'UNK-5',
+  'Asia/Atyrau': 'UNK-5',
+  'Asia/Baghdad': 'UNK-3',
+  'Asia/Bahrain': 'UNK-3',
+  'Asia/Baku': 'UNK-4',
+  'Asia/Bangkok': 'UNK-7',
+  'Asia/Barnaul': 'UNK-7',
+  'Asia/Beirut': 'EET-2EEST,M3.5.0/0,M10.5.0/0',
+  'Asia/Bishkek': 'UNK-6',
+  'Asia/Brunei': 'UNK-8',
+  'Asia/Chita': 'UNK-9',
+  'Asia/Choibalsan': 'UNK-8',
+  'Asia/Colombo': 'UNK-5:30',
+  'Asia/Damascus': 'EET-2EEST,M3.5.5/0,M10.5.5/0',
+  'Asia/Dhaka': 'UNK-6',
+  'Asia/Dili': 'UNK-9',
+  'Asia/Dubai': 'UNK-4',
+  'Asia/Dushanbe': 'UNK-5',
+  'Asia/Famagusta': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Asia/Gaza': 'EET-2EEST,M3.5.5/0,M10.5.6/1',
+  'Asia/Hebron': 'EET-2EEST,M3.5.5/0,M10.5.6/1',
+  'Asia/Ho_Chi_Minh': 'UNK-7',
+  'Asia/Hong_Kong': 'HKT-8',
+  'Asia/Hovd': 'UNK-7',
+  'Asia/Irkutsk': 'UNK-8',
+  'Asia/Jakarta': 'WIB-7',
+  'Asia/Jayapura': 'WIT-9',
+  'Asia/Jerusalem': 'IST-2IDT,M3.4.4/26,M10.5.0',
+  'Asia/Kabul': 'UNK-4:30',
+  'Asia/Kamchatka': 'UNK-12',
+  'Asia/Karachi': 'PKT-5',
+  'Asia/Kathmandu': 'UNK-5:45',
+  'Asia/Khandyga': 'UNK-9',
+  'Asia/Kolkata': 'IST-5:30',
+  'Asia/Krasnoyarsk': 'UNK-7',
+  'Asia/Kuala_Lumpur': 'UNK-8',
+  'Asia/Kuching': 'UNK-8',
+  'Asia/Kuwait': 'UNK-3',
+  'Asia/Macau': 'CST-8',
+  'Asia/Magadan': 'UNK-11',
+  'Asia/Makassar': 'WITA-8',
+  'Asia/Manila': 'PST-8',
+  'Asia/Muscat': 'UNK-4',
+  'Asia/Nicosia': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Asia/Novokuznetsk': 'UNK-7',
+  'Asia/Novosibirsk': 'UNK-7',
+  'Asia/Omsk': 'UNK-6',
+  'Asia/Oral': 'UNK-5',
+  'Asia/Phnom_Penh': 'UNK-7',
+  'Asia/Pontianak': 'WIB-7',
+  'Asia/Pyongyang': 'KST-9',
+  'Asia/Qatar': 'UNK-3',
+  'Asia/Qyzylorda': 'UNK-5',
+  'Asia/Riyadh': 'UNK-3',
+  'Asia/Sakhalin': 'UNK-11',
+  'Asia/Samarkand': 'UNK-5',
+  'Asia/Seoul': 'KST-9',
+  'Asia/Shanghai': 'CST-8',
+  'Asia/Singapore': 'UNK-8',
+  'Asia/Srednekolymsk': 'UNK-11',
+  'Asia/Taipei': 'CST-8',
+  'Asia/Tashkent': 'UNK-5',
+  'Asia/Tbilisi': 'UNK-4',
+  'Asia/Tehran': 'UNK-3:30UNK,J79/24,J263/24',
+  'Asia/Thimphu': 'UNK-6',
+  'Asia/Tokyo': 'JST-9',
+  'Asia/Tomsk': 'UNK-7',
+  'Asia/Ulaanbaatar': 'UNK-8',
+  'Asia/Urumqi': 'UNK-6',
+  'Asia/Ust-Nera': 'UNK-10',
+  'Asia/Vientiane': 'UNK-7',
+  'Asia/Vladivostok': 'UNK-10',
+  'Asia/Yakutsk': 'UNK-9',
+  'Asia/Yangon': 'UNK-6:30',
+  'Asia/Yekaterinburg': 'UNK-5',
+  'Asia/Yerevan': 'UNK-4',
+  'Atlantic/Azores': 'UNK1UNK,M3.5.0/0,M10.5.0/1',
+  'Atlantic/Bermuda': 'AST4ADT,M3.2.0,M11.1.0',
+  'Atlantic/Canary': 'WET0WEST,M3.5.0/1,M10.5.0',
+  'Atlantic/Cape_Verde': 'UNK1',
+  'Atlantic/Faroe': 'WET0WEST,M3.5.0/1,M10.5.0',
+  'Atlantic/Madeira': 'WET0WEST,M3.5.0/1,M10.5.0',
+  'Atlantic/Reykjavik': 'GMT0',
+  'Atlantic/South_Georgia': 'UNK2',
+  'Atlantic/St_Helena': 'GMT0',
+  'Atlantic/Stanley': 'UNK3',
+  'Australia/Adelaide': 'ACST-9:30ACDT,M10.1.0,M4.1.0/3',
+  'Australia/Brisbane': 'AEST-10',
+  'Australia/Broken_Hill': 'ACST-9:30ACDT,M10.1.0,M4.1.0/3',
+  'Australia/Currie': 'AEST-10AEDT,M10.1.0,M4.1.0/3',
+  'Australia/Darwin': 'ACST-9:30',
+  'Australia/Eucla': 'UNK-8:45',
+  'Australia/Hobart': 'AEST-10AEDT,M10.1.0,M4.1.0/3',
+  'Australia/Lindeman': 'AEST-10',
+  'Australia/Lord_Howe': 'UNK-10:30UNK-11,M10.1.0,M4.1.0',
+  'Australia/Melbourne': 'AEST-10AEDT,M10.1.0,M4.1.0/3',
+  'Australia/Perth': 'AWST-8',
+  'Australia/Sydney': 'AEST-10AEDT,M10.1.0,M4.1.0/3',
+  'Etc/GMT': 'GMT0',
+  'Etc/GMT+0': 'GMT0',
+  'Etc/GMT+1': 'UNK1',
+  'Etc/GMT+10': 'UNK10',
+  'Etc/GMT+11': 'UNK11',
+  'Etc/GMT+12': 'UNK12',
+  'Etc/GMT+2': 'UNK2',
+  'Etc/GMT+3': 'UNK3',
+  'Etc/GMT+4': 'UNK4',
+  'Etc/GMT+5': 'UNK5',
+  'Etc/GMT+6': 'UNK6',
+  'Etc/GMT+7': 'UNK7',
+  'Etc/GMT+8': 'UNK8',
+  'Etc/GMT+9': 'UNK9',
+  'Etc/GMT-0': 'GMT0',
+  'Etc/GMT-1': 'UNK-1',
+  'Etc/GMT-10': 'UNK-10',
+  'Etc/GMT-11': 'UNK-11',
+  'Etc/GMT-12': 'UNK-12',
+  'Etc/GMT-13': 'UNK-13',
+  'Etc/GMT-14': 'UNK-14',
+  'Etc/GMT-2': 'UNK-2',
+  'Etc/GMT-3': 'UNK-3',
+  'Etc/GMT-4': 'UNK-4',
+  'Etc/GMT-5': 'UNK-5',
+  'Etc/GMT-6': 'UNK-6',
+  'Etc/GMT-7': 'UNK-7',
+  'Etc/GMT-8': 'UNK-8',
+  'Etc/GMT-9': 'UNK-9',
+  'Etc/GMT0': 'GMT0',
+  'Etc/Greenwich': 'GMT0',
+  'Etc/UCT': 'UTC0',
+  'Etc/UTC': 'UTC0',
+  'Etc/Universal': 'UTC0',
+  'Etc/Zulu': 'UTC0',
+  'Europe/Amsterdam': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Andorra': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Astrakhan': 'UNK-4',
+  'Europe/Athens': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Belgrade': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Berlin': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Bratislava': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Brussels': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Bucharest': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Budapest': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Busingen': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Chisinau': 'EET-2EEST,M3.5.0,M10.5.0/3',
+  'Europe/Copenhagen': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Dublin': 'IST-1GMT0,M10.5.0,M3.5.0/1',
+  'Europe/Gibraltar': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Guernsey': 'GMT0BST,M3.5.0/1,M10.5.0',
+  'Europe/Helsinki': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Isle_of_Man': 'GMT0BST,M3.5.0/1,M10.5.0',
+  'Europe/Istanbul': 'UNK-3',
+  'Europe/Jersey': 'GMT0BST,M3.5.0/1,M10.5.0',
+  'Europe/Kaliningrad': 'EET-2',
+  'Europe/Kiev': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Kirov': 'UNK-3',
+  'Europe/Lisbon': 'WET0WEST,M3.5.0/1,M10.5.0',
+  'Europe/Ljubljana': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/London': 'GMT0BST,M3.5.0/1,M10.5.0',
+  'Europe/Luxembourg': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Madrid': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Malta': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Mariehamn': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Minsk': 'UNK-3',
+  'Europe/Monaco': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Moscow': 'MSK-3',
+  'Europe/Oslo': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Paris': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Podgorica': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Prague': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Riga': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Rome': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Samara': 'UNK-4',
+  'Europe/San_Marino': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Sarajevo': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Saratov': 'UNK-4',
+  'Europe/Simferopol': 'MSK-3',
+  'Europe/Skopje': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Sofia': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Stockholm': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Tallinn': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Tirane': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Ulyanovsk': 'UNK-4',
+  'Europe/Uzhgorod': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Vaduz': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Vatican': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Vienna': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Vilnius': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Volgograd': 'UNK-4',
+  'Europe/Warsaw': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Zagreb': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Europe/Zaporozhye': 'EET-2EEST,M3.5.0/3,M10.5.0/4',
+  'Europe/Zurich': 'CET-1CEST,M3.5.0,M10.5.0/3',
+  'Indian/Antananarivo': 'EAT-3',
+  'Indian/Chagos': 'UNK-6',
+  'Indian/Christmas': 'UNK-7',
+  'Indian/Cocos': 'UNK-6:30',
+  'Indian/Comoro': 'EAT-3',
+  'Indian/Kerguelen': 'UNK-5',
+  'Indian/Mahe': 'UNK-4',
+  'Indian/Maldives': 'UNK-5',
+  'Indian/Mauritius': 'UNK-4',
+  'Indian/Mayotte': 'EAT-3',
+  'Indian/Reunion': 'UNK-4',
+  'Pacific/Apia': 'UNK-13UNK,M9.5.0/3,M4.1.0/4',
+  'Pacific/Auckland': 'NZST-12NZDT,M9.5.0,M4.1.0/3',
+  'Pacific/Bougainville': 'UNK-11',
+  'Pacific/Chatham': 'UNK-12:45UNK,M9.5.0/2:45,M4.1.0/3:45',
+  'Pacific/Chuuk': 'UNK-10',
+  'Pacific/Easter': 'UNK6UNK,M9.1.6/22,M4.1.6/22',
+  'Pacific/Efate': 'UNK-11',
+  'Pacific/Enderbury': 'UNK-13',
+  'Pacific/Fakaofo': 'UNK-13',
+  'Pacific/Fiji': 'UNK-12UNK,M11.2.0,M1.2.3/99',
+  'Pacific/Funafuti': 'UNK-12',
+  'Pacific/Galapagos': 'UNK6',
+  'Pacific/Gambier': 'UNK9',
+  'Pacific/Guadalcanal': 'UNK-11',
+  'Pacific/Guam': 'ChST-10',
+  'Pacific/Honolulu': 'HST10',
+  'Pacific/Kiritimati': 'UNK-14',
+  'Pacific/Kosrae': 'UNK-11',
+  'Pacific/Kwajalein': 'UNK-12',
+  'Pacific/Majuro': 'UNK-12',
+  'Pacific/Marquesas': 'UNK9:30',
+  'Pacific/Midway': 'SST11',
+  'Pacific/Nauru': 'UNK-12',
+  'Pacific/Niue': 'UNK11',
+  'Pacific/Norfolk': 'UNK-11UNK,M10.1.0,M4.1.0/3',
+  'Pacific/Noumea': 'UNK-11',
+  'Pacific/Pago_Pago': 'SST11',
+  'Pacific/Palau': 'UNK-9',
+  'Pacific/Pitcairn': 'UNK8',
+  'Pacific/Pohnpei': 'UNK-11',
+  'Pacific/Port_Moresby': 'UNK-10',
+  'Pacific/Rarotonga': 'UNK10',
+  'Pacific/Saipan': 'ChST-10',
+  'Pacific/Tahiti': 'UNK10',
+  'Pacific/Tarawa': 'UNK-12',
+  'Pacific/Tongatapu': 'UNK-13',
+  'Pacific/Wake': 'UNK-12',
+  'Pacific/Wallis': 'UNK-12'
+};
+
+export function selectedTimeZone(label: string, format: string) {
+  return TIME_ZONES[label] === format ? label : undefined;
+}
+
+export function timeZoneSelectItems() {
+  return Object.keys(TIME_ZONES).map((label) => (
+    <MenuItem key={label} value={label}>
+      {label}
+    </MenuItem>
+  ));
+}

interface/src/app/settings/UploadDownload.tsx

@@ -0,0 +1,367 @@
+import { type FC, useState } from 'react';
+import { toast } from 'react-toastify';
+
+import DownloadIcon from '@mui/icons-material/GetApp';
+import { Box, Button, Divider, Link, Typography } from '@mui/material';
+
+import * as SystemApi from 'api/system';
+
+import * as EMSESP from 'app/main/api';
+import { useRequest } from 'alova';
+import type { APIcall } from 'app/main/types';
+import {
+  FormLoader,
+  SectionContent,
+  SingleUpload,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import RestartMonitor from '../status/RestartMonitor';
+
+const UploadDownload: FC = () => {
+  const { LL } = useI18nContext();
+  const [restarting, setRestarting] = useState<boolean>();
+  const [md5, setMd5] = useState<string>();
+
+  const { send: getSettings, onSuccess: onSuccessGetSettings } = useRequest(
+    EMSESP.getSettings(),
+    {
+      immediate: false
+    }
+  );
+  const { send: getCustomizations, onSuccess: onSuccessGetCustomizations } =
+    useRequest(EMSESP.getCustomizations(), {
+      immediate: false
+    });
+  const { send: getEntities, onSuccess: onSuccessGetEntities } = useRequest(
+    EMSESP.getEntities(),
+    {
+      immediate: false
+    }
+  );
+  const { send: getSchedule, onSuccess: onSuccessGetSchedule } = useRequest(
+    EMSESP.getSchedule(),
+    {
+      immediate: false
+    }
+  );
+  const { send: getAPI, onSuccess: onGetAPI } = useRequest(
+    (data: APIcall) => EMSESP.API(data),
+    {
+      immediate: false
+    }
+  );
+
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useRequest(SystemApi.readESPSystemStatus, { force: true });
+
+  const { data: latestVersion } = useRequest(SystemApi.getStableVersion, {
+    immediate: true,
+    force: true
+  });
+
+  const { data: latestDevVersion } = useRequest(SystemApi.getDevVersion, {
+    immediate: true,
+    force: true
+  });
+
+  const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
+  const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
+
+  const STABLE_RELNOTES_URL =
+    'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
+  const DEV_RELNOTES_URL =
+    'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
+
+  const getBinURL = (v: string) =>
+    'EMS-ESP-' +
+    v.replaceAll('.', '_') +
+    '-' +
+    getPlatform().replaceAll('-', '_') +
+    '.bin';
+
+  const getPlatform = () => {
+    if (data.flash_chip_size === 16384) {
+      return data.esp_platform + '-16M';
+    }
+    return data.esp_platform;
+  };
+
+  const {
+    loading: isUploading,
+    uploading: progress,
+    send: sendUpload,
+    onSuccess: onSuccessUpload,
+    abort: cancelUpload
+  } = useRequest(SystemApi.uploadFile, {
+    immediate: false,
+    force: true
+  });
+
+  onSuccessUpload(({ data }) => {
+    if (data) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      setMd5(data.md5);
+      toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
+    } else {
+      setRestarting(true);
+    }
+  });
+
+  const startUpload = async (files: File[]) => {
+    await sendUpload(files[0]).catch((error: Error) => {
+      if (error.message === 'The user aborted a request') {
+        toast.warning(LL.UPLOAD() + ' ' + LL.ABORTED());
+      } else if (error.message === 'Network Error') {
+        toast.warning('Invalid file extension or incompatible bin file');
+      } else {
+        toast.error(error.message);
+      }
+    });
+  };
+
+  const saveFile = (json: unknown, endpoint: string) => {
+    const anchor = document.createElement('a');
+    anchor.href = URL.createObjectURL(
+      new Blob([JSON.stringify(json, null, 2)], {
+        type: 'text/plain'
+      })
+    );
+    anchor.download = 'emsesp_' + endpoint;
+    anchor.click();
+    URL.revokeObjectURL(anchor.href);
+    toast.info(LL.DOWNLOAD_SUCCESSFUL());
+  };
+
+  onSuccessGetSettings((event) => {
+    saveFile(event.data, 'settings.json');
+  });
+  onSuccessGetCustomizations((event) => {
+    saveFile(event.data, 'customizations.json');
+  });
+  onSuccessGetEntities((event) => {
+    saveFile(event.data, 'entities.json');
+  });
+  onSuccessGetSchedule((event) => {
+    saveFile(event.data, 'schedule.json');
+  });
+  onGetAPI((event) => {
+    saveFile(
+      event.data,
+
+      event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt'
+    );
+  });
+
+  const downloadSettings = async () => {
+    await getSettings().catch((error: Error) => {
+      toast.error(error.message);
+    });
+  };
+
+  const downloadCustomizations = async () => {
+    await getCustomizations().catch((error: Error) => {
+      toast.error(error.message);
+    });
+  };
+
+  const downloadEntities = async () => {
+    await getEntities().catch((error: Error) => {
+      toast.error(error.message);
+    });
+  };
+
+  const downloadSchedule = async () => {
+    await getSchedule().catch((error: Error) => {
+      toast.error(error.message);
+    });
+  };
+
+  const callAPI = async (device: string, entity: string) => {
+    await getAPI({ device, entity, id: 0 }).catch((error: Error) => {
+      toast.error(error.message);
+    });
+  };
+
+  useLayoutTitle(LL.UPLOAD_DOWNLOAD());
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    }
+
+    return (
+      <>
+        <Typography sx={{ pb: 2 }} variant="h6" color="primary">
+          {LL.EMS_ESP_VER()}
+        </Typography>
+        <Box p={2} border="2px solid grey" borderRadius={2}>
+          {LL.VERSION_ON() + ' '}
+          <b>{data.emsesp_version}</b>&nbsp;({getPlatform()})
+          <Divider />
+          {latestVersion && (
+            <Box mt={2}>
+              {LL.THE_LATEST()}&nbsp;{LL.OFFICIAL()}&nbsp;{LL.RELEASE_IS()}
+              &nbsp;<b>{latestVersion}</b>
+              &nbsp;(
+              <Link target="_blank" href={STABLE_RELNOTES_URL} color="primary">
+                {LL.RELEASE_NOTES()}
+              </Link>
+              )&nbsp;(
+              <Link
+                target="_blank"
+                href={
+                  STABLE_URL +
+                  'v' +
+                  latestVersion +
+                  '/' +
+                  getBinURL(latestVersion as string)
+                }
+                color="primary"
+              >
+                {LL.DOWNLOAD(1)}
+              </Link>
+              )
+            </Box>
+          )}
+          {latestDevVersion && (
+            <Box mt={2}>
+              {LL.THE_LATEST()}&nbsp;{LL.DEVELOPMENT()}&nbsp;{LL.RELEASE_IS()}
+              &nbsp;
+              <b>{latestDevVersion}</b>
+              &nbsp;(
+              <Link target="_blank" href={DEV_RELNOTES_URL} color="primary">
+                {LL.RELEASE_NOTES()}
+              </Link>
+              )&nbsp;(
+              <Link
+                target="_blank"
+                href={DEV_URL + getBinURL(latestDevVersion as string)}
+                color="primary"
+              >
+                {LL.DOWNLOAD(1)}
+              </Link>
+              )
+            </Box>
+          )}
+        </Box>
+
+        <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
+          {LL.UPLOAD()}
+        </Typography>
+        <Box mb={2} color="warning.main">
+          <Typography variant="body2">
+            {LL.UPLOAD_TEXT()}
+            <br />
+            <br />
+            {LL.RESTART_TEXT(1)}.
+          </Typography>
+        </Box>
+        {md5 && (
+          <Box mb={2}>
+            <Typography variant="body2">{'MD5: ' + md5}</Typography>
+          </Box>
+        )}
+        <SingleUpload
+          onDrop={startUpload}
+          onCancel={cancelUpload}
+          isUploading={isUploading}
+          progress={progress}
+        />
+        {!isUploading && (
+          <>
+            <Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
+              {LL.DOWNLOAD(0)}
+            </Typography>
+            <Box color="warning.main">
+              <Typography mb={1} variant="body2">
+                {LL.HELP_INFORMATION_4()}
+              </Typography>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={() => callAPI('system', 'info')}
+              >
+                {LL.SUPPORT_INFORMATION(0)}
+              </Button>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={() => callAPI('system', 'allvalues')}
+              >
+                All Values
+              </Button>
+            </Box>
+
+            <Box color="warning.main">
+              <Typography mt={2} mb={1} variant="body2">
+                {LL.DOWNLOAD_SETTINGS_TEXT()}
+              </Typography>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={downloadSettings}
+              >
+                {LL.SETTINGS_OF('')}
+              </Button>
+            </Box>
+
+            <Box color="warning.main">
+              <Typography mt={2} mb={1} variant="body2">
+                {LL.DOWNLOAD_CUSTOMIZATION_TEXT()}
+              </Typography>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={downloadCustomizations}
+              >
+                {LL.CUSTOMIZATIONS()}
+              </Button>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={downloadEntities}
+              >
+                {LL.CUSTOM_ENTITIES(0)}
+              </Button>
+              <Box color="warning.main">
+                <Typography mt={2} mb={1} variant="body2">
+                  {LL.DOWNLOAD_SCHEDULE_TEXT()}
+                </Typography>
+              </Box>
+              <Button
+                sx={{ ml: 2 }}
+                startIcon={<DownloadIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={downloadSchedule}
+              >
+                {LL.SCHEDULE(0)}
+              </Button>
+            </Box>
+          </>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
+  );
+};
+
+export default UploadDownload;

interface/src/app/settings/network/Network.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
+
+import { Tab } from '@mui/material';
+
+import { RouterTabs, useLayoutTitle, useRouterTab } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { WiFiNetwork } from 'types';
+
+import NetworkSettings from './NetworkSettings';
+import { WiFiConnectionContext } from './WiFiConnectionContext';
+import WiFiNetworkScanner from './WiFiNetworkScanner';
+
+const Network: FC = () => {
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.SETTINGS_OF(LL.NETWORK(0)));
+
+  const { routerTab } = useRouterTab();
+
+  const navigate = useNavigate();
+
+  const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork>();
+
+  const selectNetwork = useCallback(
+    (network: WiFiNetwork) => {
+      setSelectedNetwork(network);
+      navigate('settings');
+    },
+    [navigate]
+  );
+
+  const deselectNetwork = useCallback(() => {
+    setSelectedNetwork(undefined);
+  }, []);
+
+  return (
+    <WiFiConnectionContext.Provider
+      value={{
+        selectedNetwork,
+        selectNetwork,
+        deselectNetwork
+      }}
+    >
+      <RouterTabs value={routerTab}>
+        <Tab value="settings" label={LL.SETTINGS_OF(LL.NETWORK(1))} />
+        <Tab value="scan" label={LL.NETWORK_SCAN()} />
+      </RouterTabs>
+      <Routes>
+        <Route path="scan" element={<WiFiNetworkScanner />} />
+        <Route path="settings" element={<NetworkSettings />} />
+        <Route path="*" element={<Navigate replace to="settings" />} />
+      </Routes>
+    </WiFiConnectionContext.Provider>
+  );
+};
+
+export default Network;

interface/src/app/settings/network/NetworkSettings.tsx

@@ -0,0 +1,406 @@
+import { useContext, useEffect, useState } from 'react';
+import type { FC } from 'react';
+import { toast } from 'react-toastify';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import DeleteIcon from '@mui/icons-material/Delete';
+import LockIcon from '@mui/icons-material/Lock';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Avatar,
+  Button,
+  Checkbox,
+  IconButton,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemSecondaryAction,
+  ListItemText,
+  MenuItem,
+  TextField,
+  Typography
+} from '@mui/material';
+
+import * as NetworkApi from 'api/network';
+import * as SystemApi from 'api/system';
+
+import { updateState, useRequest } from 'alova';
+import type { ValidateFieldsError } from 'async-validator';
+import {
+  BlockFormControlLabel,
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  MessageBox,
+  SectionContent,
+  ValidatedPasswordField,
+  ValidatedTextField
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { NetworkSettingsType } from 'types';
+import { updateValueDirty, useRest } from 'utils';
+import { validate } from 'validators';
+import { createNetworkSettingsValidator } from 'validators/network';
+
+import RestartMonitor from '../../status/RestartMonitor';
+import { WiFiConnectionContext } from './WiFiConnectionContext';
+import { isNetworkOpen, networkSecurityMode } from './WiFiNetworkSelector';
+
+const NetworkSettings: FC = () => {
+  const { LL } = useI18nContext();
+
+  const { selectedNetwork, deselectNetwork } = useContext(WiFiConnectionContext);
+
+  const [initialized, setInitialized] = useState(false);
+  const [restarting, setRestarting] = useState(false);
+
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage,
+    restartNeeded
+  } = useRest<NetworkSettingsType>({
+    read: NetworkApi.readNetworkSettings,
+    update: NetworkApi.updateNetworkSettings
+  });
+
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
+
+  useEffect(() => {
+    if (!initialized && data) {
+      if (selectedNetwork) {
+        updateState('networkSettings', (current_data: NetworkSettingsType) => ({
+          ssid: selectedNetwork.ssid,
+          bssid: selectedNetwork.bssid,
+          password: current_data ? current_data.password : '',
+          hostname: current_data?.hostname,
+          static_ip_config: false,
+          bandwidth20: false,
+          tx_power: 0,
+          nosleep: false,
+          enableMDNS: true,
+          enableCORS: false,
+          CORSOrigin: '*'
+        }));
+      }
+      setInitialized(true);
+    }
+  }, [initialized, setInitialized, data, selectedNetwork]);
+
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );
+
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
+  useEffect(() => deselectNetwork, [deselectNetwork]);
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+    }
+
+    const validateAndSubmit = async () => {
+      try {
+        setFieldErrors(undefined);
+        await validate(createNetworkSettingsValidator(data), data);
+        await saveData();
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      }
+      deselectNetwork();
+    };
+
+    const setCancel = async () => {
+      deselectNetwork();
+      await loadData();
+    };
+
+    const restart = async () => {
+      await restartCommand().catch((error: Error) => {
+        toast.error(error.message);
+      });
+      setRestarting(true);
+    };
+
+    return (
+      <>
+        <Typography variant="h6" color="primary">
+          WiFi
+        </Typography>
+        {selectedNetwork ? (
+          <List>
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar>
+                  {isNetworkOpen(selectedNetwork) ? <LockOpenIcon /> : <LockIcon />}
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText
+                primary={selectedNetwork.ssid}
+                secondary={
+                  'Security: ' +
+                  networkSecurityMode(selectedNetwork) +
+                  ', Ch: ' +
+                  selectedNetwork.channel +
+                  ', bssid: ' +
+                  selectedNetwork.bssid
+                }
+              />
+              <ListItemSecondaryAction>
+                <IconButton onClick={setCancel}>
+                  <DeleteIcon />
+                </IconButton>
+              </ListItemSecondaryAction>
+            </ListItem>
+          </List>
+        ) : (
+          <ValidatedTextField
+            fieldErrors={fieldErrors}
+            name="ssid"
+            label={'SSID (' + LL.NETWORK_BLANK_SSID() + ')'}
+            fullWidth
+            variant="outlined"
+            value={data.ssid}
+            onChange={updateFormValue}
+            margin="normal"
+          />
+        )}
+        <ValidatedTextField
+          fieldErrors={fieldErrors}
+          name="bssid"
+          label={'BSSID (' + LL.NETWORK_BLANK_BSSID() + ')'}
+          fullWidth
+          variant="outlined"
+          value={data.bssid}
+          onChange={updateFormValue}
+          margin="normal"
+        />
+        {(!selectedNetwork || !isNetworkOpen(selectedNetwork)) && (
+          <ValidatedPasswordField
+            fieldErrors={fieldErrors}
+            name="password"
+            label={LL.PASSWORD()}
+            fullWidth
+            variant="outlined"
+            value={data.password}
+            onChange={updateFormValue}
+            margin="normal"
+          />
+        )}
+        <TextField
+          name="tx_power"
+          label={LL.TX_POWER()}
+          fullWidth
+          variant="outlined"
+          value={data.tx_power}
+          onChange={updateFormValue}
+          margin="normal"
+          select
+        >
+          <MenuItem value={0}>Auto</MenuItem>
+          <MenuItem value={78}>19.5 dBm</MenuItem>
+          <MenuItem value={76}>19 dBm</MenuItem>
+          <MenuItem value={74}>18.5 dBm</MenuItem>
+          <MenuItem value={68}>17 dBm</MenuItem>
+          <MenuItem value={60}>15 dBm</MenuItem>
+          <MenuItem value={52}>13 dBm</MenuItem>
+          <MenuItem value={44}>11 dBm</MenuItem>
+          <MenuItem value={34}>8.5 dBm</MenuItem>
+          <MenuItem value={28}>7 dBm</MenuItem>
+          <MenuItem value={20}>5 dBm</MenuItem>
+          <MenuItem value={8}>2 dBm</MenuItem>
+        </TextField>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="nosleep"
+              checked={data.nosleep}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.NETWORK_DISABLE_SLEEP()}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="bandwidth20"
+              checked={data.bandwidth20}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.NETWORK_LOW_BAND()}
+        />
+        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+          {LL.GENERAL_OPTIONS()}
+        </Typography>
+        <ValidatedTextField
+          fieldErrors={fieldErrors}
+          name="hostname"
+          label={LL.HOSTNAME()}
+          fullWidth
+          variant="outlined"
+          value={data.hostname}
+          onChange={updateFormValue}
+          margin="normal"
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="enableMDNS"
+              checked={data.enableMDNS}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.NETWORK_USE_DNS()}
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="enableCORS"
+              checked={data.enableCORS}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.NETWORK_ENABLE_CORS()}
+        />
+        {data.enableCORS && (
+          <TextField
+            name="CORSOrigin"
+            label={LL.NETWORK_CORS_ORIGIN()}
+            fullWidth
+            variant="outlined"
+            value={data.CORSOrigin}
+            onChange={updateFormValue}
+            margin="normal"
+          />
+        )}
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="static_ip_config"
+              checked={data.static_ip_config}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.NETWORK_FIXED_IP()}
+        />
+        {data.static_ip_config && (
+          <>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="local_ip"
+              label={LL.AP_LOCAL_IP()}
+              fullWidth
+              variant="outlined"
+              value={data.local_ip}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="gateway_ip"
+              label={LL.NETWORK_GATEWAY()}
+              fullWidth
+              variant="outlined"
+              value={data.gateway_ip}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="subnet_mask"
+              label={LL.NETWORK_SUBNET()}
+              fullWidth
+              variant="outlined"
+              value={data.subnet_mask}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="dns_ip_1"
+              label="DNS #1"
+              fullWidth
+              variant="outlined"
+              value={data.dns_ip_1}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="dns_ip_2"
+              label="DNS #2"
+              fullWidth
+              variant="outlined"
+              value={data.dns_ip_2}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </>
+        )}
+        {restartNeeded && (
+          <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
+            <Button
+              startIcon={<PowerSettingsNewIcon />}
+              variant="contained"
+              color="error"
+              onClick={restart}
+            >
+              {LL.RESTART()}
+            </Button>
+          </MessageBox>
+        )}
+
+        {!restartNeeded &&
+          (selectedNetwork || (dirtyFlags && dirtyFlags.length !== 0)) && (
+            <ButtonRow>
+              <Button
+                startIcon={<CancelIcon />}
+                disabled={saving}
+                variant="outlined"
+                color="primary"
+                type="submit"
+                onClick={loadData}
+              >
+                {LL.CANCEL()}
+              </Button>
+              <Button
+                startIcon={<WarningIcon color="warning" />}
+                disabled={saving}
+                variant="contained"
+                color="info"
+                type="submit"
+                onClick={validateAndSubmit}
+              >
+                {LL.APPLY_CHANGES(dirtyFlags.length)}
+              </Button>
+            </ButtonRow>
+          )}
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {restarting ? <RestartMonitor /> : content()}
+    </SectionContent>
+  );
+};
+
+export default NetworkSettings;

interface/src/app/settings/network/WiFiConnectionContext.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+import type { WiFiNetwork } from 'types';
+
+export interface WiFiConnectionContextValue {
+  selectedNetwork?: WiFiNetwork;
+  selectNetwork: (network: WiFiNetwork) => void;
+  deselectNetwork: () => void;
+}
+
+const WiFiConnectionContextDefaultValue = {} as WiFiConnectionContextValue;
+export const WiFiConnectionContext = createContext(
+  WiFiConnectionContextDefaultValue
+);

interface/src/app/settings/network/WiFiNetworkScanner.tsx

@@ -0,0 +1,81 @@
+import { useRef, useState } from 'react';
+import type { FC } from 'react';
+
+import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
+import { Button } from '@mui/material';
+
+import * as NetworkApi from 'api/network';
+
+import { updateState, useRequest } from 'alova';
+import { ButtonRow, FormLoader, SectionContent } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import WiFiNetworkSelector from './WiFiNetworkSelector';
+
+const NUM_POLLS = 10;
+const POLLING_FREQUENCY = 1000;
+
+const WiFiNetworkScanner: FC = () => {
+  const pollCount = useRef(0);
+  const { LL } = useI18nContext();
+  const [errorMessage, setErrorMessage] = useState<string>();
+
+  const { send: scanNetworks, onComplete: onCompleteScanNetworks } = useRequest(
+    NetworkApi.scanNetworks
+  ); // is called on page load to start network scan
+  const {
+    data: networkList,
+    send: getNetworkList,
+    onSuccess: onSuccessNetworkList
+  } = useRequest(NetworkApi.listNetworks, {
+    immediate: false
+  });
+
+  onSuccessNetworkList((event) => {
+    if (!event.data) {
+      const completedPollCount = pollCount.current + 1;
+      if (completedPollCount < NUM_POLLS) {
+        pollCount.current = completedPollCount;
+        setTimeout(getNetworkList, POLLING_FREQUENCY);
+      } else {
+        setErrorMessage(LL.PROBLEM_LOADING());
+        pollCount.current = 0;
+      }
+    }
+  });
+
+  onCompleteScanNetworks(() => {
+    pollCount.current = 0;
+    setErrorMessage(undefined);
+    updateState('listNetworks', () => undefined);
+    void getNetworkList();
+  });
+
+  const renderNetworkScanner = () => {
+    if (!networkList) {
+      return (
+        <FormLoader message={LL.SCANNING() + '...'} errorMessage={errorMessage} />
+      );
+    }
+    return <WiFiNetworkSelector networkList={networkList} />;
+  };
+
+  return (
+    <SectionContent>
+      {renderNetworkScanner()}
+      <ButtonRow>
+        <Button
+          startIcon={<PermScanWifiIcon />}
+          variant="outlined"
+          color="secondary"
+          onClick={scanNetworks}
+          disabled={!errorMessage && !networkList}
+        >
+          {LL.SCAN_AGAIN()}&hellip;
+        </Button>
+      </ButtonRow>
+    </SectionContent>
+  );
+};
+
+export default WiFiNetworkScanner;

interface/src/app/settings/network/WiFiNetworkSelector.tsx

@@ -0,0 +1,105 @@
+import { useContext } from 'react';
+import type { FC } from 'react';
+
+import LockIcon from '@mui/icons-material/Lock';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
+import WifiIcon from '@mui/icons-material/Wifi';
+import {
+  Avatar,
+  Badge,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemIcon,
+  ListItemText,
+  useTheme
+} from '@mui/material';
+import type { Theme } from '@mui/material';
+
+import { MessageBox } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { WiFiNetwork, WiFiNetworkList } from 'types';
+import { WiFiEncryptionType } from 'types';
+
+import { WiFiConnectionContext } from './WiFiConnectionContext';
+
+interface WiFiNetworkSelectorProps {
+  networkList: WiFiNetworkList;
+}
+
+export const isNetworkOpen = ({ encryption_type }: WiFiNetwork) =>
+  encryption_type === WiFiEncryptionType.WIFI_AUTH_OPEN;
+
+export const networkSecurityMode = ({ encryption_type }: WiFiNetwork) => {
+  switch (encryption_type) {
+    case WiFiEncryptionType.WIFI_AUTH_WEP:
+      return 'WEP';
+    case WiFiEncryptionType.WIFI_AUTH_WPA_PSK:
+      return 'WPA';
+    case WiFiEncryptionType.WIFI_AUTH_WPA2_PSK:
+      return 'WPA2';
+    case WiFiEncryptionType.WIFI_AUTH_WPA_WPA2_PSK:
+      return 'WPA/WPA2';
+    case WiFiEncryptionType.WIFI_AUTH_WPA2_ENTERPRISE:
+      return 'WPA2 Enterprise';
+    case WiFiEncryptionType.WIFI_AUTH_OPEN:
+      return 'None';
+    case WiFiEncryptionType.WIFI_AUTH_WPA3_PSK:
+      return 'WPA3';
+    case WiFiEncryptionType.WIFI_AUTH_WPA2_WPA3_PSK:
+      return 'WPA2/WPA3';
+    default:
+      return 'Unknown: ' + String(encryption_type);
+  }
+};
+
+const networkQualityHighlight = ({ rssi }: WiFiNetwork, theme: Theme) => {
+  if (rssi <= -85) {
+    return theme.palette.error.main;
+  } else if (rssi <= -75) {
+    return theme.palette.warning.main;
+  }
+  return theme.palette.success.main;
+};
+
+const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
+  const { LL } = useI18nContext();
+  const theme = useTheme();
+
+  const wifiConnectionContext = useContext(WiFiConnectionContext);
+
+  const renderNetwork = (network: WiFiNetwork) => (
+    <ListItem
+      key={network.bssid}
+      onClick={() => wifiConnectionContext.selectNetwork(network)}
+    >
+      <ListItemAvatar>
+        <Avatar>{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
+      </ListItemAvatar>
+      <ListItemText
+        primary={network.ssid}
+        secondary={
+          'Security: ' +
+          networkSecurityMode(network) +
+          ', Ch: ' +
+          network.channel +
+          ', bssid: ' +
+          network.bssid
+        }
+      />
+      <ListItemIcon>
+        <Badge badgeContent={network.rssi + 'dBm'}>
+          <WifiIcon sx={{ color: networkQualityHighlight(network, theme) }} />
+        </Badge>
+      </ListItemIcon>
+    </ListItem>
+  );
+
+  if (networkList.networks.length === 0) {
+    return <MessageBox mt={2} mb={1} message={LL.NETWORK_NO_WIFI()} level="info" />;
+  }
+
+  return <List>{networkList.networks.map(renderNetwork)}</List>;
+};
+
+export default WiFiNetworkSelector;

interface/src/app/settings/security/GenerateToken.tsx

@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import type { FC } from 'react';
+
+import CloseIcon from '@mui/icons-material/Close';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  LinearProgress,
+  TextField,
+  Typography
+} from '@mui/material';
+
+import * as SecurityApi from 'api/security';
+
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova';
+import { MessageBox } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+interface GenerateTokenProps {
+  username?: string;
+  onClose: () => void;
+}
+
+const GenerateToken: FC<GenerateTokenProps> = ({ username, onClose }) => {
+  const { LL } = useI18nContext();
+  const open = !!username;
+
+  const { data: token, send: generateToken } = useRequest(
+    SecurityApi.generateToken(username),
+    {
+      immediate: false
+    }
+  );
+
+  useEffect(() => {
+    if (open) {
+      void generateToken();
+    }
+  }, [open]);
+
+  return (
+    <Dialog
+      sx={dialogStyle}
+      onClose={onClose}
+      open={!!username}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle>{LL.ACCESS_TOKEN_FOR() + ' ' + username}</DialogTitle>
+      <DialogContent dividers>
+        {token ? (
+          <>
+            <MessageBox message={LL.ACCESS_TOKEN_TEXT()} level="info" my={2} />
+            <Box mt={2} mb={2}>
+              <TextField
+                label="Token"
+                multiline
+                value={token.token}
+                fullWidth
+                contentEditable={false}
+              />
+            </Box>
+          </>
+        ) : (
+          <Box m={4} textAlign="center">
+            <LinearProgress />
+            <Typography variant="h6">{LL.GENERATING_TOKEN()}&hellip;</Typography>
+          </Box>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CloseIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
+          {LL.CLOSE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default GenerateToken;

interface/src/app/settings/security/ManageUsers.tsx

@@ -0,0 +1,286 @@
+import { useContext, useState } from 'react';
+import type { FC } from 'react';
+import { useBlocker } from 'react-router-dom';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import VpnKeyIcon from '@mui/icons-material/VpnKey';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Box, Button, IconButton } from '@mui/material';
+
+import * as SecurityApi from 'api/security';
+
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import {
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  MessageBox,
+  SectionContent
+} from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { SecuritySettingsType, UserType } from 'types';
+import { useRest } from 'utils';
+import { createUserValidator } from 'validators';
+
+import GenerateToken from './GenerateToken';
+import User from './User';
+
+const ManageUsers: FC = () => {
+  const { loadData, saveData, saving, data, updateDataValue, errorMessage } =
+    useRest<SecuritySettingsType>({
+      read: SecurityApi.readSecuritySettings,
+      update: SecurityApi.updateSecuritySettings
+    });
+
+  const [user, setUser] = useState<UserType>();
+  const [creating, setCreating] = useState<boolean>(false);
+  const [changed, setChanged] = useState<number>(0);
+  const [generatingToken, setGeneratingToken] = useState<string>();
+  const authenticatedContext = useContext(AuthenticatedContext);
+
+  const blocker = useBlocker(changed !== 0);
+  const { LL } = useI18nContext();
+
+  const table_theme = useTheme({
+    Table: `
+      --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) minmax(120px, max-content) 120px;
+    `,
+    BaseRow: `
+      font-size: 14px;
+    `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        padding: 8px;
+        height: 36px;
+        border-bottom: 1px solid #565656;
+      }
+    `,
+    Row: `
+      .td {
+        padding: 8px;
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+      }
+      &:nth-of-type(odd) .td {
+        background-color: #303030;
+      }
+      &:nth-of-type(even) .td {
+        background-color: #1e1e1e;
+      }
+    `,
+    BaseCell: `
+      &:nth-of-type(2) {
+        text-align: center;
+      }
+      &:last-of-type {
+        text-align: right;
+      }
+    `
+  });
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+    }
+
+    const noAdminConfigured = () => !data.users.find((u) => u.admin);
+
+    const removeUser = (toRemove: UserType) => {
+      const users = data.users.filter((u) => u.username !== toRemove.username);
+      updateDataValue({ ...data, users });
+      setChanged(changed + 1);
+    };
+
+    const createUser = () => {
+      setCreating(true);
+      setUser({
+        username: '',
+        password: '',
+        admin: true
+      });
+    };
+
+    const editUser = (toEdit: UserType) => {
+      setCreating(false);
+      setUser({ ...toEdit });
+    };
+
+    const cancelEditingUser = () => {
+      setUser(undefined);
+    };
+
+    const doneEditingUser = () => {
+      if (user) {
+        const users = [
+          ...data.users.filter(
+            (u: { username: string }) => u.username !== user.username
+          ),
+          user
+        ];
+        updateDataValue({ ...data, users });
+        setUser(undefined);
+        setChanged(changed + 1);
+      }
+    };
+
+    const closeGenerateToken = () => {
+      setGeneratingToken(undefined);
+    };
+
+    const generateToken = (username: string) => {
+      setGeneratingToken(username);
+    };
+
+    const onSubmit = async () => {
+      await saveData();
+      await authenticatedContext.refresh();
+      setChanged(0);
+    };
+
+    const onCancelSubmit = async () => {
+      await loadData();
+      setChanged(0);
+    };
+
+    interface UserType2 {
+      id: string;
+      username: string;
+      password: string;
+      admin: boolean;
+    }
+
+    // add id to the type, needed for the table
+    const user_table = data.users.map((u) => ({
+      ...u,
+      id: u.username
+    })) as UserType2[];
+
+    return (
+      <>
+        <Table
+          data={{ nodes: user_table }}
+          theme={table_theme}
+          layout={{ custom: true }}
+        >
+          {(tableList: UserType2[]) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCell resize>{LL.USERNAME(1)}</HeaderCell>
+                  <HeaderCell stiff>{LL.IS_ADMIN(0)}</HeaderCell>
+                  <HeaderCell stiff />
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((u: UserType2) => (
+                  <Row key={u.id} item={u}>
+                    <Cell>{u.username}</Cell>
+                    <Cell stiff>{u.admin ? <CheckIcon /> : <CloseIcon />}</Cell>
+                    <Cell stiff>
+                      <IconButton
+                        size="small"
+                        disabled={!authenticatedContext.me.admin}
+                        onClick={() => generateToken(u.username)}
+                      >
+                        <VpnKeyIcon />
+                      </IconButton>
+                      <IconButton size="small" onClick={() => removeUser(u)}>
+                        <DeleteIcon />
+                      </IconButton>
+                      <IconButton size="small" onClick={() => editUser(u)}>
+                        <EditIcon />
+                      </IconButton>
+                    </Cell>
+                  </Row>
+                ))}
+              </Body>
+            </>
+          )}
+        </Table>
+
+        {noAdminConfigured() && (
+          <MessageBox level="warning" message={LL.USER_WARNING()} my={2} />
+        )}
+
+        <Box display="flex" flexWrap="wrap">
+          <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
+            {changed !== 0 && (
+              <ButtonRow>
+                <Button
+                  startIcon={<CancelIcon />}
+                  disabled={saving}
+                  variant="outlined"
+                  color="primary"
+                  type="submit"
+                  onClick={onCancelSubmit}
+                >
+                  {LL.CANCEL()}
+                </Button>
+                <Button
+                  startIcon={<WarningIcon color="warning" />}
+                  disabled={saving || noAdminConfigured()}
+                  variant="contained"
+                  color="info"
+                  type="submit"
+                  onClick={onSubmit}
+                >
+                  {LL.APPLY_CHANGES(changed)}
+                </Button>
+              </ButtonRow>
+            )}
+          </Box>
+
+          <Box flexWrap="nowrap" whiteSpace="nowrap">
+            <ButtonRow>
+              <Button
+                startIcon={<PersonAddIcon />}
+                variant="outlined"
+                color="secondary"
+                onClick={createUser}
+              >
+                {LL.ADD(0)}
+              </Button>
+            </ButtonRow>
+          </Box>
+        </Box>
+
+        <GenerateToken username={generatingToken} onClose={closeGenerateToken} />
+        <User
+          user={user}
+          setUser={setUser}
+          creating={creating}
+          onDoneEditing={doneEditingUser}
+          onCancelEditing={cancelEditingUser}
+          validator={createUserValidator(data.users, creating)}
+        />
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {content()}
+    </SectionContent>
+  );
+};
+
+export default ManageUsers;

interface/src/app/settings/security/Security.tsx

@@ -0,0 +1,33 @@
+import type { FC } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+import { Tab } from '@mui/material';
+
+import { RouterTabs, useLayoutTitle, useRouterTab } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import ManageUsers from './ManageUsers';
+import SecuritySettings from './SecuritySettings';
+
+const Security: FC = () => {
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.SETTINGS_OF(LL.SECURITY(0)));
+
+  const { routerTab } = useRouterTab();
+
+  return (
+    <>
+      <RouterTabs value={routerTab}>
+        <Tab value="settings" label={LL.SETTINGS_OF(LL.SECURITY(1))} />
+        <Tab value="users" label={LL.MANAGE_USERS()} />
+      </RouterTabs>
+      <Routes>
+        <Route path="users" element={<ManageUsers />} />
+        <Route path="settings" element={<SecuritySettings />} />
+        <Route path="*" element={<Navigate replace to="settings" />} />
+      </Routes>
+    </>
+  );
+};
+
+export default Security;

interface/src/app/settings/security/SecuritySettings.tsx

@@ -0,0 +1,119 @@
+import { useContext, useState } from 'react';
+import type { FC } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Button } from '@mui/material';
+
+import * as SecurityApi from 'api/security';
+
+import type { ValidateFieldsError } from 'async-validator';
+import {
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  MessageBox,
+  SectionContent,
+  ValidatedPasswordField
+} from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { SecuritySettingsType } from 'types';
+import { updateValueDirty, useRest } from 'utils';
+import { SECURITY_SETTINGS_VALIDATOR, validate } from 'validators';
+
+const SecuritySettings: FC = () => {
+  const { LL } = useI18nContext();
+
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest<SecuritySettingsType>({
+    read: SecurityApi.readSecuritySettings,
+    update: SecurityApi.updateSecuritySettings
+  });
+
+  const authenticatedContext = useContext(AuthenticatedContext);
+
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+    }
+
+    const validateAndSubmit = async () => {
+      try {
+        setFieldErrors(undefined);
+        await validate(SECURITY_SETTINGS_VALIDATOR, data);
+        await saveData();
+        await authenticatedContext.refresh();
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      }
+    };
+
+    return (
+      <>
+        <ValidatedPasswordField
+          fieldErrors={fieldErrors}
+          name="jwt_secret"
+          label={LL.SU_PASSWORD()}
+          fullWidth
+          variant="outlined"
+          value={data.jwt_secret}
+          onChange={updateFormValue}
+          margin="normal"
+        />
+        <MessageBox level="info" message={LL.SU_TEXT()} mt={1} />
+        {dirtyFlags && dirtyFlags.length !== 0 && (
+          <ButtonRow>
+            <Button
+              startIcon={<CancelIcon />}
+              disabled={saving}
+              variant="outlined"
+              color="primary"
+              type="submit"
+              onClick={loadData}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              disabled={saving}
+              variant="contained"
+              color="info"
+              type="submit"
+              onClick={validateAndSubmit}
+            >
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
+            </Button>
+          </ButtonRow>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {content()}
+    </SectionContent>
+  );
+};
+
+export default SecuritySettings;

interface/src/app/settings/security/User.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+import type { FC } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import SaveIcon from '@mui/icons-material/Save';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
+import {
+  BlockFormControlLabel,
+  ValidatedPasswordField,
+  ValidatedTextField
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { UserType } from 'types';
+import { updateValue } from 'utils';
+import { validate } from 'validators';
+
+interface UserFormProps {
+  creating: boolean;
+  validator: Schema;
+
+  user?: UserType;
+  setUser: React.Dispatch<React.SetStateAction<UserType | undefined>>;
+
+  onDoneEditing: () => void;
+  onCancelEditing: () => void;
+}
+
+const User: FC<UserFormProps> = ({
+  creating,
+  validator,
+  user,
+  setUser,
+  onDoneEditing,
+  onCancelEditing
+}) => {
+  const { LL } = useI18nContext();
+
+  const updateFormValue = updateValue(setUser);
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+  const open = !!user;
+
+  useEffect(() => {
+    if (open) {
+      setFieldErrors(undefined);
+    }
+  }, [open]);
+
+  const validateAndDone = async () => {
+    if (user) {
+      try {
+        setFieldErrors(undefined);
+        await validate(validator, user);
+        onDoneEditing();
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      }
+    }
+  };
+
+  return (
+    <Dialog
+      sx={dialogStyle}
+      onClose={onCancelEditing}
+      open={!!user}
+      fullWidth
+      maxWidth="sm"
+    >
+      {user && (
+        <>
+          <DialogTitle id="user-form-dialog-title">
+            {creating ? LL.ADD(1) : LL.MODIFY()}&nbsp;{LL.USER(1)}
+          </DialogTitle>
+          <DialogContent dividers>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="username"
+              label={LL.USERNAME(1)}
+              fullWidth
+              variant="outlined"
+              value={user.username}
+              disabled={!creating}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <ValidatedPasswordField
+              fieldErrors={fieldErrors}
+              name="password"
+              label={LL.PASSWORD()}
+              fullWidth
+              variant="outlined"
+              value={user.password}
+              onChange={updateFormValue}
+              margin="normal"
+            />
+            <BlockFormControlLabel
+              control={
+                <Checkbox
+                  name="admin"
+                  checked={user.admin}
+                  onChange={updateFormValue}
+                />
+              }
+              label={LL.IS_ADMIN(1)}
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button
+              startIcon={<CancelIcon />}
+              variant="outlined"
+              onClick={onCancelEditing}
+              color="secondary"
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={creating ? <PersonAddIcon /> : <SaveIcon />}
+              variant="outlined"
+              onClick={validateAndDone}
+              color="primary"
+            >
+              {creating ? LL.ADD(0) : LL.UPDATE()}
+            </Button>
+          </DialogActions>
+        </>
+      )}
+    </Dialog>
+  );
+};
+
+export default User;

interface/src/app/status/APStatus.tsx

@@ -0,0 +1,127 @@
+import type { FC } from 'react';
+
+import ComputerIcon from '@mui/icons-material/Computer';
+import DeviceHubIcon from '@mui/icons-material/DeviceHub';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
+import {
+  Avatar,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  useTheme
+} from '@mui/material';
+import type { Theme } from '@mui/material';
+
+import * as APApi from 'api/ap';
+
+import { useRequest } from 'alova';
+import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { APStatusType } from 'types';
+import { APNetworkStatus } from 'types';
+
+export const apStatusHighlight = ({ status }: APStatusType, theme: Theme) => {
+  switch (status) {
+    case APNetworkStatus.ACTIVE:
+      return theme.palette.success.main;
+    case APNetworkStatus.INACTIVE:
+      return theme.palette.info.main;
+    case APNetworkStatus.LINGERING:
+      return theme.palette.warning.main;
+    default:
+      return theme.palette.warning.main;
+  }
+};
+
+const APStatus: FC = () => {
+  const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);
+
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.STATUS_OF(LL.ACCESS_POINT(0)));
+
+  const theme = useTheme();
+
+  const apStatus = ({ status }: APStatusType) => {
+    switch (status) {
+      case APNetworkStatus.ACTIVE:
+        return LL.ACTIVE();
+      case APNetworkStatus.INACTIVE:
+        return LL.INACTIVE(0);
+      case APNetworkStatus.LINGERING:
+        return 'Lingering until idle';
+      default:
+        return LL.UNKNOWN();
+    }
+  };
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    }
+
+    return (
+      <>
+        <List>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: apStatusHighlight(data, theme) }}>
+                <SettingsInputAntennaIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.STATUS_OF('')} secondary={apStatus(data)} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>IP</Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.ADDRESS_OF('IP')}
+              secondary={data.ip_address}
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <DeviceHubIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.ADDRESS_OF('MAC')}
+              secondary={data.mac_address}
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <ComputerIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.AP_CLIENTS()} secondary={data.station_num} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+        </List>
+        <ButtonRow>
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="outlined"
+            color="secondary"
+            onClick={loadData}
+          >
+            {LL.REFRESH()}
+          </Button>
+        </ButtonRow>
+      </>
+    );
+  };
+
+  return <SectionContent>{content()}</SectionContent>;
+};
+
+export default APStatus;

interface/src/app/status/Activity.tsx

@@ -0,0 +1,148 @@
+import { useEffect } from 'react';
+import type { FC } from 'react';
+
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { Button } from '@mui/material';
+
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme as tableTheme } from '@table-library/react-table-library/theme';
+import { useRequest } from 'alova';
+import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { Translation } from 'i18n/i18n-types';
+
+import * as EMSESP from '../main/api';
+import type { Stat } from '../main/types';
+
+const SystemActivity: FC = () => {
+  const { data: data, send: loadData, error } = useRequest(EMSESP.readActivity);
+
+  const { LL } = useI18nContext();
+
+  useLayoutTitle(LL.EMS_BUS_STATUS());
+
+  const stats_theme = tableTheme({
+    Table: `
+      --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 90px 80px;
+    `,
+    BaseRow: `
+      font-size: 14px;
+    `,
+    HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+
+      .th {
+        height: 36px;
+        border-bottom: 1px solid #565656;
+      }
+    `,
+    Row: `
+      .td {
+        padding: 8px;
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+      }
+
+      &:nth-of-type(odd) .td {
+        background-color: #303030;
+      }
+      &:nth-of-type(even) .td {
+        background-color: #1e1e1e;
+      }
+    `,
+    BaseCell: `
+      &:not(:first-of-type) {
+        text-align: center;
+      }
+    `
+  });
+
+  useEffect(() => {
+    const timer = setInterval(() => loadData(), 30000);
+    return () => {
+      clearInterval(timer);
+    };
+  });
+
+  const showName = (id: number) => {
+    const name: keyof Translation['STATUS_NAMES'] = id;
+    return LL.STATUS_NAMES[name]();
+  };
+
+  const showQuality = (stat: Stat) => {
+    if (stat.q === 0 || stat.s + stat.f === 0) {
+      return;
+    }
+    if (stat.q === 100) {
+      return <div style={{ color: '#00FF7F' }}>{stat.q}%</div>;
+    }
+    if (stat.q >= 95) {
+      return <div style={{ color: 'orange' }}>{stat.q}%</div>;
+    } else {
+      return <div style={{ color: 'red' }}>{stat.q}%</div>;
+    }
+  };
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    }
+
+    return (
+      <>
+        <Table
+          data={{ nodes: data.stats }}
+          theme={stats_theme}
+          layout={{ custom: true }}
+        >
+          {(tableList: Stat[]) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCell resize />
+                  <HeaderCell stiff>{LL.SUCCESS()}</HeaderCell>
+                  <HeaderCell stiff>{LL.FAIL()}</HeaderCell>
+                  <HeaderCell stiff>{LL.QUALITY()}</HeaderCell>
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((stat: Stat) => (
+                  <Row key={stat.id} item={stat}>
+                    <Cell>{showName(stat.id)}</Cell>
+                    <Cell stiff>{Intl.NumberFormat().format(stat.s)}</Cell>
+                    <Cell stiff>{Intl.NumberFormat().format(stat.f)}</Cell>
+                    <Cell stiff>{showQuality(stat)}</Cell>
+                  </Row>
+                ))}
+              </Body>
+            </>
+          )}
+        </Table>
+        <ButtonRow mt={1}>
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="outlined"
+            color="secondary"
+            onClick={loadData}
+          >
+            {LL.REFRESH()}
+          </Button>
+        </ButtonRow>
+      </>
+    );
+  };
+
+  return <SectionContent>{content()}</SectionContent>;
+};
+
+export default SystemActivity;

interface/src/app/status/HardwareStatus.tsx

@@ -0,0 +1,221 @@
+import type { FC } from 'react';
+
+import AppsIcon from '@mui/icons-material/Apps';
+import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
+import DevicesIcon from '@mui/icons-material/Devices';
+import FolderIcon from '@mui/icons-material/Folder';
+import MemoryIcon from '@mui/icons-material/Memory';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import SdCardAlertIcon from '@mui/icons-material/SdCardAlert';
+import SdStorageIcon from '@mui/icons-material/SdStorage';
+import TapAndPlayIcon from '@mui/icons-material/TapAndPlay';
+import {
+  Avatar,
+  Box,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText
+} from '@mui/material';
+
+import * as SystemApi from 'api/system';
+
+import { useRequest } from 'alova';
+import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import BBQKeesIcon from './bbqkees.svg';
+
+function formatNumber(num: number) {
+  return new Intl.NumberFormat().format(num);
+}
+
+const ESPSystemStatus: FC = () => {
+  const { LL } = useI18nContext();
+
+  useLayoutTitle(LL.STATUS_OF(LL.HARDWARE()));
+
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useRequest(SystemApi.readESPSystemStatus, { force: true });
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    }
+
+    return (
+      <>
+        <List>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#003289', color: 'white' }}>
+                {data.model ? (
+                  <img
+                    src={BBQKeesIcon}
+                    style={{ width: 16, verticalAlign: 'middle' }}
+                  />
+                ) : (
+                  <TapAndPlayIcon />
+                )}
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.HARDWARE() + ' ' + LL.DEVICE()}
+              secondary={data.model ? data.model : data.cpu_type}
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
+                <DevicesIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary="SDK"
+              secondary={data.arduino_version + ' / ESP-IDF ' + data.sdk_version}
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
+                <DeveloperBoardIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary="CPU"
+              secondary={
+                data.esp_platform +
+                '/' +
+                data.cpu_type +
+                ' (rev.' +
+                data.cpu_rev +
+                ', ' +
+                (data.cpu_cores == 1 ? 'single-core)' : 'dual-core)') +
+                ' @ ' +
+                data.cpu_freq_mhz +
+                ' Mhz'
+              }
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
+                <MemoryIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.FREE_MEMORY()}
+              secondary={
+                formatNumber(data.free_heap) +
+                ' KB (' +
+                formatNumber(data.max_alloc_heap) +
+                ' KB max alloc)'
+              }
+            />
+          </ListItem>
+          {data.psram_size !== undefined && data.free_psram !== undefined && (
+            <>
+              <Divider variant="inset" component="li" />
+              <ListItem>
+                <ListItemAvatar>
+                  <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
+                    <AppsIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                  primary={LL.PSRAM()}
+                  secondary={
+                    formatNumber(data.psram_size) +
+                    ' KB / ' +
+                    formatNumber(data.free_psram) +
+                    ' KB'
+                  }
+                />
+              </ListItem>
+            </>
+          )}
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
+                <SdStorageIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.FLASH()}
+              secondary={
+                formatNumber(data.flash_chip_size) +
+                ' KB , ' +
+                (data.flash_chip_speed / 1000000).toFixed(0) +
+                ' MHz'
+              }
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
+                <SdCardAlertIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.APPSIZE()}
+              secondary={
+                data.partition +
+                ': ' +
+                formatNumber(data.app_used) +
+                ' KB / ' +
+                formatNumber(data.app_free) +
+                ' KB'
+              }
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
+                <FolderIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.FILESYSTEM()}
+              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 } }}>
+            <ButtonRow>
+              <Button
+                startIcon={<RefreshIcon />}
+                variant="outlined"
+                color="secondary"
+                onClick={loadData}
+              >
+                {LL.REFRESH()}
+              </Button>
+            </ButtonRow>
+          </Box>
+        </Box>
+      </>
+    );
+  };
+
+  return <SectionContent>{content()}</SectionContent>;
+};
+
+export default ESPSystemStatus;

interface/src/app/status/MqttStatus.tsx

@@ -0,0 +1,181 @@
+import type { FC } from 'react';
+
+import AutoAwesomeMotionIcon from '@mui/icons-material/AutoAwesomeMotion';
+import DeviceHubIcon from '@mui/icons-material/DeviceHub';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import ReportIcon from '@mui/icons-material/Report';
+import SpeakerNotesOffIcon from '@mui/icons-material/SpeakerNotesOff';
+import {
+  Avatar,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  useTheme
+} from '@mui/material';
+import type { Theme } from '@mui/material';
+
+import * as MqttApi from 'api/mqtt';
+
+import { useRequest } from 'alova';
+import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { MqttStatusType } from 'types';
+import { MqttDisconnectReason } from 'types';
+
+export const mqttStatusHighlight = (
+  { enabled, connected }: MqttStatusType,
+  theme: Theme
+) => {
+  if (!enabled) {
+    return theme.palette.info.main;
+  }
+  if (connected) {
+    return theme.palette.success.main;
+  }
+  return theme.palette.error.main;
+};
+
+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 }: MqttStatusType,
+  theme: Theme
+) => {
+  if (mqtt_queued <= 1) return theme.palette.success.main;
+
+  return theme.palette.warning.main;
+};
+
+const MqttStatus: FC = () => {
+  const { data: data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);
+
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.STATUS_OF('MQTT'));
+
+  const theme = useTheme();
+
+  const mqttStatus = ({ enabled, connected, connect_count }: MqttStatusType) => {
+    if (!enabled) {
+      return LL.NOT_ENABLED();
+    }
+    if (connected) {
+      return LL.CONNECTED(0) + (connect_count > 1 ? ' (' + connect_count + ')' : '');
+    }
+    return LL.DISCONNECTED() + (connect_count > 1 ? ' (' + connect_count + ')' : '');
+  };
+
+  const disconnectReason = ({ disconnect_reason }: MqttStatusType) => {
+    switch (disconnect_reason) {
+      case MqttDisconnectReason.TCP_DISCONNECTED:
+        return 'TCP disconnected';
+      case MqttDisconnectReason.MQTT_UNACCEPTABLE_PROTOCOL_VERSION:
+        return 'Unacceptable protocol version';
+      case MqttDisconnectReason.MQTT_IDENTIFIER_REJECTED:
+        return 'Client ID rejected';
+      case MqttDisconnectReason.MQTT_SERVER_UNAVAILABLE:
+        return 'Server unavailable';
+      case MqttDisconnectReason.MQTT_MALFORMED_CREDENTIALS:
+        return 'Malformed credentials';
+      case MqttDisconnectReason.MQTT_NOT_AUTHORIZED:
+        return 'Not authorized';
+      case MqttDisconnectReason.TLS_BAD_FINGERPRINT:
+        return 'TLS fingerprint invalid';
+      default:
+        return 'Unknown';
+    }
+  };
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    }
+
+    const renderConnectionStatus = () => (
+      <>
+        {!data.connected && (
+          <>
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar>
+                  <ReportIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText
+                primary={LL.DISCONNECT_REASON()}
+                secondary={disconnectReason(data)}
+              />
+            </ListItem>
+            <Divider variant="inset" component="li" />
+          </>
+        )}
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>#</Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={LL.ID_OF(LL.CLIENT())} secondary={data.client_id} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar sx={{ bgcolor: mqttQueueHighlight(data, theme) }}>
+              <AutoAwesomeMotionIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={LL.MQTT_QUEUE()} secondary={data.mqtt_queued} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar sx={{ bgcolor: mqttPublishHighlight(data, theme) }}>
+              <SpeakerNotesOffIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={LL.ERRORS_OF('MQTT')} secondary={data.mqtt_fails} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+      </>
+    );
+
+    return (
+      <>
+        <List>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: mqttStatusHighlight(data, theme) }}>
+                <DeviceHubIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.STATUS_OF('')} secondary={mqttStatus(data)} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          {data.enabled && renderConnectionStatus()}
+        </List>
+        <ButtonRow>
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="outlined"
+            color="secondary"
+            onClick={loadData}
+          >
+            {LL.REFRESH()}
+          </Button>
+        </ButtonRow>
+      </>
+    );
+  };
+
+  return <SectionContent>{content()}</SectionContent>;
+};
+
+export default MqttStatus;

interface/src/app/status/NTPStatus.tsx

@@ -0,0 +1,253 @@
+import { useState } from 'react';
+import type { FC } from 'react';
+import { toast } from 'react-toastify';
+
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import CancelIcon from '@mui/icons-material/Cancel';
+import DnsIcon from '@mui/icons-material/Dns';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import SwapVerticalCircleIcon from '@mui/icons-material/SwapVerticalCircle';
+import UpdateIcon from '@mui/icons-material/Update';
+import {
+  Avatar,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  TextField,
+  Typography,
+  useTheme
+} from '@mui/material';
+import type { Theme } from '@mui/material';
+
+import * as NTPApi from 'api/ntp';
+
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova';
+import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { NTPStatusType, Time } from 'types';
+import { NTPSyncStatus } from 'types';
+import { formatDateTime, formatLocalDateTime } from 'utils';
+
+const NTPStatus: FC = () => {
+  const { data: data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);
+
+  const [localTime, setLocalTime] = useState<string>('');
+  const [settingTime, setSettingTime] = useState<boolean>(false);
+  const [processing, setProcessing] = useState<boolean>(false);
+
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.STATUS_OF('NTP'));
+
+  const { send: updateTime } = useRequest(
+    (local_time: Time) => NTPApi.updateTime(local_time),
+    {
+      immediate: false
+    }
+  );
+
+  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 = () => {
+    setLocalTime(formatLocalDateTime(new Date()));
+    setSettingTime(true);
+  };
+
+  const theme = useTheme();
+
+  const ntpStatus = ({ status }: NTPStatusType) => {
+    switch (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 configureTime = async () => {
+    setProcessing(true);
+
+    await updateTime({ local_time: formatLocalDateTime(new Date(localTime)) })
+      .then(async () => {
+        toast.success(LL.TIME_SET());
+        setSettingTime(false);
+        await loadData();
+      })
+      .catch(() => {
+        toast.error(LL.PROBLEM_UPDATING());
+      })
+      .finally(() => {
+        setProcessing(false);
+      });
+  };
+
+  const renderSetTimeDialog = () => (
+    <Dialog
+      sx={dialogStyle}
+      open={settingTime}
+      onClose={() => setSettingTime(false)}
+    >
+      <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
+      <DialogContent dividers>
+        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
+          <Typography variant="body2">{LL.SET_TIME_TEXT()}</Typography>
+        </Box>
+        <TextField
+          label={LL.LOCAL_TIME(0)}
+          type="datetime-local"
+          value={localTime}
+          onChange={updateLocalTime}
+          disabled={processing}
+          fullWidth
+          InputLabelProps={{
+            shrink: true
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setSettingTime(false)}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<AccessTimeIcon />}
+          variant="outlined"
+          onClick={configureTime}
+          disabled={processing}
+          color="primary"
+        >
+          {LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    }
+
+    return (
+      <>
+        <List>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: ntpStatusHighlight(data, theme) }}>
+                <UpdateIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.STATUS_OF('')} secondary={ntpStatus(data)} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          {isNtpEnabled(data) && (
+            <>
+              <ListItem>
+                <ListItemAvatar>
+                  <Avatar>
+                    <DnsIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText primary={LL.NTP_SERVER()} secondary={data.server} />
+              </ListItem>
+              <Divider variant="inset" component="li" />
+            </>
+          )}
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <AccessTimeIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.LOCAL_TIME(0)}
+              secondary={formatDateTime(data.local_time)}
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <SwapVerticalCircleIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.UTC_TIME()}
+              secondary={formatDateTime(data.utc_time)}
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+        </List>
+        <Box display="flex" flexWrap="wrap">
+          <Box flexGrow={1}>
+            <ButtonRow>
+              <Button
+                startIcon={<RefreshIcon />}
+                variant="outlined"
+                color="secondary"
+                onClick={loadData}
+              >
+                {LL.REFRESH()}
+              </Button>
+            </ButtonRow>
+          </Box>
+          {data && !isNtpActive(data) && (
+            <Box flexWrap="nowrap" whiteSpace="nowrap">
+              <ButtonRow>
+                <Button
+                  onClick={openSetTime}
+                  variant="outlined"
+                  color="primary"
+                  startIcon={<AccessTimeIcon />}
+                >
+                  {LL.SET_TIME(0)}
+                </Button>
+              </ButtonRow>
+            </Box>
+          )}
+        </Box>
+        {renderSetTimeDialog()}
+      </>
+    );
+  };
+
+  return <SectionContent>{content()}</SectionContent>;
+};
+
+export default NTPStatus;

interface/src/app/status/NetworkStatus.tsx

@@ -0,0 +1,239 @@
+import type { FC } from 'react';
+
+import DeviceHubIcon from '@mui/icons-material/DeviceHub';
+import DnsIcon from '@mui/icons-material/Dns';
+import GiteIcon from '@mui/icons-material/Gite';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import RouterIcon from '@mui/icons-material/Router';
+import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
+import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponent';
+import WifiIcon from '@mui/icons-material/Wifi';
+import {
+  Avatar,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  useTheme
+} from '@mui/material';
+import type { Theme } from '@mui/material';
+
+import * as NetworkApi from 'api/network';
+
+import { useRequest } from 'alova';
+import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { NetworkStatusType } from 'types';
+import { NetworkConnectionStatus } from 'types';
+
+const isConnected = ({ status }: NetworkStatusType) =>
+  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED ||
+  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
+
+const networkStatusHighlight = ({ status }: NetworkStatusType, theme: Theme) => {
+  switch (status) {
+    case NetworkConnectionStatus.WIFI_STATUS_IDLE:
+    case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
+    case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
+      return theme.palette.info.main;
+    case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
+    case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
+      return theme.palette.success.main;
+    case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
+    case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
+      return theme.palette.error.main;
+    default:
+      return theme.palette.warning.main;
+  }
+};
+
+const networkQualityHighlight = ({ rssi }: NetworkStatusType, theme: Theme) => {
+  if (rssi <= -85) {
+    return theme.palette.error.main;
+  } else if (rssi <= -75) {
+    return theme.palette.warning.main;
+  }
+  return theme.palette.success.main;
+};
+
+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 }: 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: NetworkStatusType) => {
+  if (
+    !status.local_ipv6 ||
+    status.local_ipv6 === '0000:0000:0000:0000:0000:0000:0000:0000'
+  ) {
+    return status.local_ip;
+  }
+  if (!status.local_ip || status.local_ip === '0.0.0.0') {
+    return status.local_ipv6;
+  }
+  return status.local_ip + ', ' + status.local_ipv6;
+};
+
+const NetworkStatus: FC = () => {
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useRequest(NetworkApi.readNetworkStatus);
+
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.STATUS_OF(LL.NETWORK(1)));
+
+  const theme = useTheme();
+
+  const networkStatus = ({ status }: NetworkStatusType) => {
+    switch (status) {
+      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
+        return LL.INACTIVE(1);
+      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
+        return LL.IDLE();
+      case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
+        return 'No SSID Available';
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
+        return LL.CONNECTED(0) + ' (WiFi)';
+      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
+        return LL.CONNECTED(0) + ' (Ethernet)';
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
+        return LL.CONNECTED(1) + ' ' + LL.FAILED(0);
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
+        return LL.CONNECTED(1) + ' ' + LL.LOST();
+      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
+        return LL.DISCONNECTED();
+      default:
+        return LL.UNKNOWN();
+    }
+  };
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    }
+
+    return (
+      <>
+        <List>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: networkStatusHighlight(data, theme) }}>
+                {isWiFi(data) && <WifiIcon />}
+                {isEthernet(data) && <RouterIcon />}
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary="Status" secondary={networkStatus(data)} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: networkStatusHighlight(data, theme) }}>
+                <GiteIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.HOSTNAME()} secondary={data.hostname} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          {isWiFi(data) && (
+            <>
+              <ListItem>
+                <ListItemAvatar>
+                  <Avatar sx={{ bgcolor: networkQualityHighlight(data, theme) }}>
+                    <SettingsInputAntennaIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                  primary="SSID (RSSI)"
+                  secondary={data.ssid + ' (' + data.rssi + ' dBm)'}
+                />
+              </ListItem>
+              <Divider variant="inset" component="li" />
+            </>
+          )}
+          {isConnected(data) && (
+            <>
+              <ListItem>
+                <ListItemAvatar>
+                  <Avatar>IP</Avatar>
+                </ListItemAvatar>
+                <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={IPs(data)} />
+              </ListItem>
+              <Divider variant="inset" component="li" />
+              <ListItem>
+                <ListItemAvatar>
+                  <Avatar>
+                    <DeviceHubIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                  primary={LL.ADDRESS_OF('MAC')}
+                  secondary={data.mac_address}
+                />
+              </ListItem>
+              <Divider variant="inset" component="li" />
+              <ListItem>
+                <ListItemAvatar>
+                  <Avatar>#</Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                  primary={LL.NETWORK_SUBNET()}
+                  secondary={data.subnet_mask}
+                />
+              </ListItem>
+              <Divider variant="inset" component="li" />
+              <ListItem>
+                <ListItemAvatar>
+                  <Avatar>
+                    <SettingsInputComponentIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                  primary={LL.NETWORK_GATEWAY()}
+                  secondary={data.gateway_ip || 'none'}
+                />
+              </ListItem>
+              <Divider variant="inset" component="li" />
+              <ListItem>
+                <ListItemAvatar>
+                  <Avatar>
+                    <DnsIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                  primary={LL.NETWORK_DNS()}
+                  secondary={dnsServers(data)}
+                />
+              </ListItem>
+              <Divider variant="inset" component="li" />
+            </>
+          )}
+        </List>
+        <ButtonRow>
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="outlined"
+            color="secondary"
+            onClick={loadData}
+          >
+            {LL.REFRESH()}
+          </Button>
+        </ButtonRow>
+      </>
+    );
+  };
+
+  return <SectionContent>{content()}</SectionContent>;
+};
+
+export default NetworkStatus;

interface/src/app/status/RestartMonitor.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react';
+import type { FC } from 'react';
+
+import * as SystemApi from 'api/system';
+
+import { useRequest } from 'alova';
+import { FormLoader } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+const RESTART_TIMEOUT = 2 * 60 * 1000;
+const POLL_INTERVAL = 3000;
+
+const RestartMonitor: FC = () => {
+  const [failed, setFailed] = useState<boolean>(false);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+  const { LL } = useI18nContext();
+  const { send } = useRequest(SystemApi.readSystemStatus, { force: true });
+  const timeoutAt = useRef(new Date().getTime() + RESTART_TIMEOUT);
+
+  const poll = useRef(async () => {
+    try {
+      await send();
+      document.location.href = '/';
+    } catch {
+      if (new Date().getTime() < timeoutAt.current) {
+        setTimeoutId(setTimeout(poll.current, POLL_INTERVAL));
+      } else {
+        setFailed(true);
+      }
+    }
+  });
+
+  useEffect(() => {
+    void poll.current();
+  }, []);
+
+  useEffect(() => () => timeoutId && clearTimeout(timeoutId), [timeoutId]);
+
+  return (
+    <FormLoader
+      message={LL.APPLICATION_RESTARTING() + '...'}
+      errorMessage={failed ? 'Timed out' : undefined}
+    />
+  );
+};
+
+export default RestartMonitor;

interface/src/app/status/Status.tsx

@@ -0,0 +1,493 @@
+import { type FC, useContext, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import BuildIcon from '@mui/icons-material/Build';
+import CancelIcon from '@mui/icons-material/Cancel';
+import DeviceHubIcon from '@mui/icons-material/DeviceHub';
+import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
+import LogoDevIcon from '@mui/icons-material/LogoDev';
+import MemoryIcon from '@mui/icons-material/Memory';
+import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import RouterIcon from '@mui/icons-material/Router';
+import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
+import TimerIcon from '@mui/icons-material/Timer';
+import UpgradeIcon from '@mui/icons-material/Upgrade';
+import WifiIcon from '@mui/icons-material/Wifi';
+import {
+  Avatar,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  useTheme
+} from '@mui/material';
+
+import * as SystemApi from 'api/system';
+
+import * as EMSESP from 'app/main/api';
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova';
+import { busConnectionStatus } from 'app/main/types';
+import { FormLoader, SectionContent, useLayoutTitle } from 'components';
+import ListMenuItem from 'components/layout/ListMenuItem';
+import { AuthenticatedContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
+import { NTPSyncStatus, NetworkConnectionStatus } from 'types';
+
+import RestartMonitor from './RestartMonitor';
+
+const SystemStatus: FC = () => {
+  const { LL } = useI18nContext();
+
+  const navigate = useNavigate();
+
+  useLayoutTitle(LL.STATUS_OF(''));
+
+  const { me } = useContext(AuthenticatedContext);
+
+  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
+  const [confirmScan, setConfirmScan] = useState<boolean>(false);
+  const [processing, setProcessing] = useState<boolean>(false);
+  const [restarting, setRestarting] = useState<boolean>();
+
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
+
+  const { send: partitionCommand } = useRequest(SystemApi.partition(), {
+    immediate: false
+  });
+
+  const {
+    data: data,
+    send: loadData,
+    error
+  } = useRequest(SystemApi.readSystemStatus, { force: true });
+
+  const { send: scanDevices } = useRequest(EMSESP.scanDevices, {
+    immediate: false
+  });
+
+  const theme = useTheme();
+
+  const formatDurationSec = (duration_sec: number) => {
+    const days = Math.trunc((duration_sec * 1000) / 86400000);
+    const hours = Math.trunc((duration_sec * 1000) / 3600000) % 24;
+    const minutes = Math.trunc((duration_sec * 1000) / 60000) % 60;
+    const seconds = Math.trunc((duration_sec * 1000) / 1000) % 60;
+
+    let formatted = '';
+    if (days) {
+      formatted += LL.NUM_DAYS({ num: days }) + ' ';
+    }
+    if (hours) {
+      formatted += LL.NUM_HOURS({ num: hours }) + ' ';
+    }
+    if (minutes) {
+      formatted += LL.NUM_MINUTES({ num: minutes }) + ' ';
+    }
+    formatted += LL.NUM_SECONDS({ num: seconds });
+    return formatted;
+  };
+
+  function formatNumber(num: number) {
+    return new Intl.NumberFormat().format(num);
+  }
+
+  const busStatus = () => {
+    if (data) {
+      switch (data.status) {
+        case busConnectionStatus.BUS_STATUS_CONNECTED:
+          return LL.CONNECTED(0) + ' (' + formatDurationSec(data.bus_uptime) + ')';
+        case busConnectionStatus.BUS_STATUS_TX_ERRORS:
+          return LL.TX_ISSUES();
+        case busConnectionStatus.BUS_STATUS_OFFLINE:
+          return LL.DISCONNECTED();
+      }
+    }
+    return 'Unknown';
+  };
+
+  const busStatusHighlight = () => {
+    switch (data.status) {
+      case busConnectionStatus.BUS_STATUS_TX_ERRORS:
+        return theme.palette.warning.main;
+      case busConnectionStatus.BUS_STATUS_CONNECTED:
+        return theme.palette.success.main;
+      case busConnectionStatus.BUS_STATUS_OFFLINE:
+        return theme.palette.error.main;
+      default:
+        return theme.palette.warning.main;
+    }
+  };
+
+  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 networkStatusHighlight = () => {
+    switch (data.network_status) {
+      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
+      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
+      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
+        return theme.palette.info.main;
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
+      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
+        return theme.palette.success.main;
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
+        return theme.palette.error.main;
+      default:
+        return theme.palette.warning.main;
+    }
+  };
+
+  const networkStatus = () => {
+    switch (data.network_status) {
+      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
+        return LL.INACTIVE(1);
+      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
+        return LL.IDLE();
+      case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
+        return 'No SSID Available';
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
+        return LL.CONNECTED(0) + ' (WiFi, ' + data.wifi_rssi + ' dBm)';
+      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
+        return LL.CONNECTED(0) + ' (Ethernet)';
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
+        return LL.CONNECTED(1) + ' ' + LL.FAILED(0);
+      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
+        return LL.CONNECTED(1) + ' ' + LL.LOST();
+      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
+        return LL.DISCONNECTED();
+      default:
+        return LL.UNKNOWN();
+    }
+  };
+
+  const activeHighlight = (value: boolean) =>
+    value ? theme.palette.success.main : theme.palette.info.main;
+
+  const scan = async () => {
+    await scanDevices()
+      .then(() => {
+        toast.info(LL.SCANNING() + '...');
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      });
+    setConfirmScan(false);
+  };
+
+  const renderScanDialog = () => (
+    <Dialog
+      sx={dialogStyle}
+      open={confirmScan}
+      onClose={() => setConfirmScan(false)}
+    >
+      <DialogTitle>{LL.SCAN_DEVICES()}</DialogTitle>
+      <DialogContent dividers>{LL.EMS_SCAN()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmScan(false)}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<PermScanWifiIcon />}
+          variant="outlined"
+          onClick={scan}
+          color="primary"
+        >
+          {LL.SCAN()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
+  const restart = async () => {
+    setProcessing(true);
+    await restartCommand()
+      .then(() => {
+        setRestarting(true);
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(() => {
+        setConfirmRestart(false);
+        setProcessing(false);
+      });
+  };
+
+  const partition = async () => {
+    setProcessing(true);
+    await partitionCommand()
+      .then(() => {
+        setRestarting(true);
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(() => {
+        setConfirmRestart(false);
+        setProcessing(false);
+      });
+  };
+
+  const renderRestartDialog = () => (
+    <Dialog
+      sx={dialogStyle}
+      open={confirmRestart}
+      onClose={() => setConfirmRestart(false)}
+    >
+      <DialogTitle>{LL.RESTART()}</DialogTitle>
+      <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmRestart(false)}
+          disabled={processing}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<PowerSettingsNewIcon />}
+          variant="outlined"
+          onClick={partition}
+          disabled={processing}
+          color="warning"
+        >
+          EMS-ESP Loader
+        </Button>
+        <Button
+          startIcon={<PowerSettingsNewIcon />}
+          variant="outlined"
+          onClick={restart}
+          disabled={processing}
+          color="error"
+        >
+          {LL.RESTART()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
+    }
+
+    return (
+      <>
+        <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
+                <TimerIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.UPTIME()}
+              secondary={formatDurationSec(data.uptime)}
+            />
+            {me.admin && (
+              <Button
+                startIcon={<PowerSettingsNewIcon />}
+                variant="outlined"
+                color="error"
+                onClick={() => setConfirmRestart(true)}
+              >
+                {LL.RESTART()}
+              </Button>
+            )}
+          </ListItem>
+
+          <Divider variant="inset" component="li" />
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={LogoDevIcon}
+            bgcolor="#40828f"
+            label={LL.LOG_OF(LL.SYSTEM(0))}
+            text={data.emsesp_version}
+            to="/status/log"
+          />
+
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#5d89f7', color: 'white' }}>
+                <DeviceHubIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.ACTIVE_DEVICES()}
+              secondary={
+                LL.NUM_DEVICES({ num: data.num_devices }) +
+                ', ' +
+                LL.NUM_TEMP_SENSORS({ num: data.num_sensors }) +
+                ', ' +
+                LL.NUM_ANALOG_SENSORS({ num: data.num_analogs })
+              }
+            />
+            {me.admin && (
+              <Button
+                startIcon={<PermScanWifiIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={() => setConfirmScan(true)}
+              >
+                {LL.SCAN_DEVICES()}
+              </Button>
+            )}
+          </ListItem>
+
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#134ba2', color: 'white' }}>
+                <BuildIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.EMS_ESP_VER()}
+              secondary={data.emsesp_version}
+            />
+            {me.admin && (
+              <Button
+                startIcon={<UpgradeIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={() => navigate('/settings/upload')}
+              >
+                {LL.UPDATE()}
+              </Button>
+            )}
+          </ListItem>
+
+          <Divider variant="inset" component="li" />
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={DirectionsBusIcon}
+            bgcolor={busStatusHighlight()}
+            label={LL.EMS_BUS_STATUS()}
+            text={busStatus()}
+            to="/status/activity"
+          />
+
+          <Divider variant="inset" component="li" />
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={MemoryIcon}
+            bgcolor="#68374d"
+            label={LL.STATUS_OF(LL.HARDWARE())}
+            text={formatNumber(data.free_heap) + ' KB' + ' ' + LL.FREE_MEMORY()}
+            to="/status/hardwarestatus"
+          />
+
+          <Divider variant="inset" component="li" />
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={
+              data.network_status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED
+                ? WifiIcon
+                : RouterIcon
+            }
+            bgcolor={networkStatusHighlight()}
+            label={LL.STATUS_OF(LL.NETWORK(1))}
+            text={networkStatus()}
+            to="/status/network"
+          />
+
+          <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="/status/mqtt"
+          />
+
+          <Divider variant="inset" component="li" />
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={AccessTimeIcon}
+            bgcolor={ntpStatusHighlight()}
+            label={LL.STATUS_OF('NTP')}
+            text={ntpStatus()}
+            to="/status/ntp"
+          />
+
+          <Divider variant="inset" component="li" />
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={SettingsInputAntennaIcon}
+            bgcolor={activeHighlight(data.ap_status)}
+            label={LL.STATUS_OF(LL.ACCESS_POINT(0))}
+            text={data.ap_status ? LL.ACTIVE() : LL.INACTIVE(0)}
+            to="/status/ap"
+          />
+        </List>
+
+        {renderScanDialog()}
+        {renderRestartDialog()}
+
+        <Box mt={2} display="flex" flexWrap="wrap">
+          <Button
+            startIcon={<RefreshIcon />}
+            variant="outlined"
+            color="secondary"
+            onClick={loadData}
+          >
+            {LL.REFRESH()}
+          </Button>
+        </Box>
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
+  );
+};
+
+export default SystemStatus;

interface/src/app/status/SystemLog.tsx

@@ -0,0 +1,299 @@
+import { useEffect, useRef, useState } from 'react';
+import type { FC } from 'react';
+import { toast } from 'react-toastify';
+
+import DownloadIcon from '@mui/icons-material/GetApp';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Grid,
+  MenuItem,
+  TextField,
+  styled
+} from '@mui/material';
+
+import * as SystemApi from 'api/system';
+import { fetchLogES } from 'api/system';
+
+import { useSSE } from '@alova/scene-react';
+import { useRequest } from 'alova';
+import {
+  BlockFormControlLabel,
+  BlockNavigation,
+  FormLoader,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { LogEntry, LogSettings } from 'types';
+import { LogLevel } from 'types';
+import { updateValueDirty, useRest } from 'utils';
+
+const ButtonTextColors = {
+  [LogLevel.ERROR]: '#ff0000', // red
+  [LogLevel.WARNING]: '#ffcc00', // yellow
+  [LogLevel.NOTICE]: '#ffffff', // white
+  [LogLevel.INFO]: '#ffffff', // yellow
+  [LogLevel.DEBUG]: '#00ffff', // cyan
+  [LogLevel.TRACE]: '#00ffff' // cyan
+};
+
+const LogEntryLine = styled('div')(
+  ({ details: { level } }: { details: { level: LogLevel } }) => ({
+    color: ButtonTextColors[level],
+    font: '14px monospace',
+    whiteSpace: 'nowrap'
+  })
+);
+
+const topOffset = () =>
+  document.getElementById('log-window')?.getBoundingClientRect().bottom || 0;
+const leftOffset = () =>
+  document.getElementById('log-window')?.getBoundingClientRect().left || 0;
+
+const levelLabel = (level: LogLevel) => {
+  switch (level) {
+    case LogLevel.ERROR:
+      return 'ERROR';
+    case LogLevel.WARNING:
+      return 'WARNING';
+    case LogLevel.NOTICE:
+      return 'NOTICE';
+    case LogLevel.INFO:
+      return 'INFO';
+    case LogLevel.DEBUG:
+      return 'DEBUG';
+    case LogLevel.TRACE:
+      return 'TRACE';
+    default:
+      return '';
+  }
+};
+
+const SystemLog: FC = () => {
+  const { LL } = useI18nContext();
+
+  useLayoutTitle(LL.LOG_OF(LL.SYSTEM(0)));
+
+  const {
+    loadData,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest<LogSettings>({
+    read: SystemApi.readLogSettings,
+    update: SystemApi.updateLogSettings
+  });
+
+  const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
+  const [lastIndex, setLastIndex] = useState<number>(0);
+
+  const updateFormValue = updateValueDirty(
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    updateDataValue
+  );
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { onMessage, onError } = useSSE(fetchLogES, {
+    immediate: true,
+    // withCredentials: true,
+    interceptByGlobalResponded: false
+  });
+
+  onMessage((message: { id: number; data: string }) => {
+    const rawData = message.data;
+    const logentry = JSON.parse(rawData) as LogEntry;
+    if (logentry.i > lastIndex) {
+      setLastIndex(logentry.i);
+      setLogEntries((log) => [...log, logentry]);
+    }
+  });
+
+  onError(() => {
+    toast.error('No connection to Log server');
+  });
+
+  // called on page load to reset pointer and fetch all log entries
+  useRequest(SystemApi.fetchLog());
+
+  const paddedLevelLabel = (level: LogLevel) => {
+    const label = levelLabel(level);
+    return data?.compact ? ' ' + label[0] : label.padStart(8, '\xa0');
+  };
+
+  const paddedNameLabel = (name: string) => {
+    const label = '[' + name + ']';
+    return data?.compact ? label : label.padEnd(12, '\xa0');
+  };
+
+  const paddedIDLabel = (id: number) => {
+    const label = id + ':';
+    return data?.compact ? label : label.padEnd(7, '\xa0');
+  };
+
+  const onDownload = () => {
+    let result = '';
+    for (const i of logEntries) {
+      result +=
+        i.t + ' ' + levelLabel(i.l) + ' ' + i.i + ': [' + i.n + '] ' + i.m + '\n';
+    }
+    const a = document.createElement('a');
+    a.setAttribute(
+      'href',
+      'data:text/plain;charset=utf-8,' + encodeURIComponent(result)
+    );
+    a.setAttribute('download', 'log.txt');
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+
+  const saveSettings = async () => {
+    await saveData();
+  };
+
+  // handle scrolling
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (logEntries.length) {
+      ref.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      });
+    }
+  }, [logEntries.length]);
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+    }
+
+    return (
+      <>
+        <Grid
+          container
+          spacing={3}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="center"
+        >
+          <Grid item xs={4}>
+            <TextField
+              name="level"
+              label={LL.LOG_LEVEL()}
+              value={data.level}
+              fullWidth
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              select
+            >
+              <MenuItem value={-1}>OFF</MenuItem>
+              <MenuItem value={3}>ERROR</MenuItem>
+              <MenuItem value={4}>WARNING</MenuItem>
+              <MenuItem value={5}>NOTICE</MenuItem>
+              <MenuItem value={6}>INFO</MenuItem>
+              <MenuItem value={9}>ALL</MenuItem>
+            </TextField>
+          </Grid>
+          <Grid item xs={4}>
+            <TextField
+              name="max_messages"
+              label={LL.BUFFER_SIZE()}
+              value={data.max_messages}
+              fullWidth
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              select
+            >
+              <MenuItem value={25}>25</MenuItem>
+              <MenuItem value={50}>50</MenuItem>
+              <MenuItem value={75}>75</MenuItem>
+              <MenuItem value={100}>100</MenuItem>
+            </TextField>
+          </Grid>
+          <Grid item xs={2}>
+            <BlockFormControlLabel
+              control={
+                <Checkbox
+                  checked={data.compact}
+                  onChange={updateFormValue}
+                  name="compact"
+                />
+              }
+              label={LL.COMPACT()}
+            />
+          </Grid>
+          <Box
+            sx={{
+              '& button, & a, & .MuiCard-root': {
+                ml: 3
+              }
+            }}
+          >
+            <Button
+              startIcon={<DownloadIcon />}
+              variant="outlined"
+              color="secondary"
+              onClick={onDownload}
+            >
+              {LL.EXPORT()}
+            </Button>
+            {dirtyFlags && dirtyFlags.length !== 0 && (
+              <Button
+                startIcon={<WarningIcon color="warning" />}
+                variant="contained"
+                color="info"
+                onClick={saveSettings}
+              >
+                {LL.APPLY_CHANGES(dirtyFlags.length)}
+              </Button>
+            )}
+          </Box>
+        </Grid>
+        <Box
+          sx={{
+            backgroundColor: 'black',
+            overflowY: 'scroll',
+            position: 'absolute',
+            right: 18,
+            bottom: 18,
+            left: () => leftOffset(),
+            top: () => topOffset(),
+            p: 1
+          }}
+        >
+          {logEntries.map((e) => (
+            <LogEntryLine details={{ level: e.l }} key={e.i}>
+              <span>{e.t}</span>
+              <span>{paddedLevelLabel(e.l)}&nbsp;</span>
+              <span>{paddedIDLabel(e.i)} </span>
+              <span>{paddedNameLabel(e.n)} </span>
+              <span>{e.m}</span>
+            </LogEntryLine>
+          ))}
+          <div ref={ref} />
+        </Box>
+      </>
+    );
+  };
+
+  return (
+    <SectionContent id="log-window">
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {content()}
+    </SectionContent>
+  );
+};
+
+export default SystemLog;

interface/src/app/status/bbqkees.svg

@@ -0,0 +1,26 @@
+<svg width="20mm" height="30.146mm" version="1.1" viewBox="0 0 20 30.146" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-86.195 -104.7)">
+  <g transform="matrix(.53414 0 0 .53414 70.913 49.568)">
+   <g fill="#fff">
+    <path d="m66.034 122.7h-37.398a18.722 18.722 0 0 0-0.02643 0.52631 18.722 18.722 0 0 0 18.722 18.722 18.722 18.722 0 0 0 18.722-18.722 18.722 18.722 0 0 0-0.01882-0.52631z" color="#000000" stroke-width=".15037" style="-inkscape-stroke:none"/>
+    <path d="m30.943 141.6v2h32.174v-2z" color="#000000" style="-inkscape-stroke:none"/>
+    <path d="m40.738 142-6.9004 11.951 1.7305 1 6.9023-11.951z" color="#000000" style="-inkscape-stroke:none"/>
+    <g fill="#fff" fill-rule="evenodd">
+     <path d="m32.395 158.45-0.0041-7.9929 6.9282 4z" color="#000000" stroke-width=".8pt" style="-inkscape-stroke:none"/>
+     <path d="m31.857 149.54 0.0039 9.8398 0.80078-0.46094 7.7246-4.4551zm1.0664 1.8457 5.3281 3.0762-5.3242 3.0723z" color="#000000" style="-inkscape-stroke:none"/>
+    </g>
+    <path d="m56.547 103.22-1.5645 1.2461s0.33514 0.43498 0.48828 1.0391c0.15315 0.60408 0.18926 1.209-0.57617 1.9688-1.1965 1.1876-1.5061 2.5227-1.4004 3.4902 0.10574 0.96749 0.5918 1.6426 0.5918 1.6426l1.6211-1.1699s-0.17552-0.2403-0.22461-0.68946c-0.04909-0.44915-0.0062-1.0331 0.82031-1.8535 1.2576-1.2483 1.3774-2.8142 1.1074-3.8789s-0.86328-1.7949-0.86328-1.7949z" color="#000000" style="-inkscape-stroke:none"/>
+    <path d="m48.918 103.22-1.5645 1.2461s0.33513 0.43498 0.48828 1.0391 0.18926 1.209-0.57617 1.9688c-1.1965 1.1876-1.5042 2.5227-1.3984 3.4902 0.10574 0.96749 0.58984 1.6426 0.58984 1.6426l1.623-1.1699s-0.17552-0.2403-0.22461-0.68946c-0.04909-0.44915-0.0062-1.0331 0.82031-1.8535 1.2576-1.2483 1.3754-2.8142 1.1055-3.8789s-0.86328-1.7949-0.86328-1.7949z" color="#000000" style="-inkscape-stroke:none"/>
+    <path d="m41.291 103.22-1.5664 1.2461s0.33709 0.43498 0.49024 1.0391 0.18926 1.209-0.57617 1.9688c-1.1965 1.1876-1.5061 2.5227-1.4004 3.4902s0.5918 1.6426 0.5918 1.6426l1.6211-1.1699s-0.17552-0.2403-0.22461-0.68946c-0.04909-0.44916-0.0062-1.0331 0.82031-1.8535 1.2576-1.2483 1.3754-2.8142 1.1055-3.8789-0.26993-1.0647-0.86133-1.7949-0.86133-1.7949z" color="#000000" style="-inkscape-stroke:none"/>
+    <path d="m54.896 113.47c-1.4548 0-2.706 0.87699-3.5293 2.0957-0.82334 1.2187-1.291 2.8147-1.291 4.5586v8e-3c5.87e-4 0.0787 0.0036 0.15349 0.0059 0.22656l1.998-0.0605c-0.0019-0.0604-0.0034-0.11856-0.0039-0.17383v-2e-3c-1.6e-5 -2e-3 1.4e-5 -4e-3 0-6e-3 0.0015-1.3755 0.38921-2.6056 0.94726-3.4316 0.55917-0.82768 1.2182-1.2148 1.873-1.2148 0.65485 0 1.3139 0.38716 1.873 1.2148s0.94727 2.0607 0.94727 3.4394h2c0-1.7439-0.46768-3.3399-1.291-4.5586-0.82334-1.2187-2.0745-2.0957-3.5293-2.0957z" color="#000000" style="-inkscape-stroke:none;paint-order:stroke fill markers"/>
+    <path d="m47.27 113.47c-1.4548 0-2.706 0.87699-3.5293 2.0957-0.82334 1.2187-1.291 2.8147-1.291 4.5586h2c0-1.3788 0.38809-2.6118 0.94726-3.4394 0.55917-0.82768 1.2182-1.2148 1.873-1.2148 0.65484-1e-5 1.3119 0.38716 1.8711 1.2148 0.55802 0.82598 0.94567 2.0563 0.94727 3.4316-0.0018 0.0584-0.0035 0.11387-0.0059 0.16406l1.998 0.0957c0.0037-0.0788 0.0057-0.15249 0.0078-0.22071l2e-3 -0.0156v-0.0156c0-1.7439-0.46767-3.3399-1.291-4.5586-0.82334-1.2187-2.0745-2.0957-3.5293-2.0957z" color="#000000" style="-inkscape-stroke:none"/>
+    <path d="m39.641 113.47c-1.4548 0-2.706 0.87699-3.5293 2.0957-0.82334 1.2187-1.291 2.8147-1.291 4.5586v0.012c8.96e-4 0.0721 0.0037 0.15312 0.0078 0.24024l1.9961-0.0957c-0.0021-0.0456-0.0031-0.0976-0.0039-0.15625v-2e-3c3.87e-4 -1.378 0.38837-2.6102 0.94727-3.4375 0.55917-0.82768 1.2182-1.2148 1.873-1.2148 0.65484 0 1.3139 0.38716 1.873 1.2148s0.94726 2.0607 0.94726 3.4394h2c0-1.7439-0.46768-3.3399-1.291-4.5586s-2.0745-2.0957-3.5293-2.0957z" color="#000000" style="-inkscape-stroke:none"/>
+    <path d="m57.557 119.33v2h5.8418v-2z" color="#000000" style="-inkscape-stroke:none"/>
+    <path d="m31.137 119.33v2h5.8418v-2z" color="#000000" style="-inkscape-stroke:none"/>
+   </g>
+   <path d="m35.826 119.95v0.77149h22.883v-0.77149z" color="#000000" fill-opacity="0" style="-inkscape-stroke:none"/>
+   <path d="m59.064 150.73c-2.4534 0-4.4629 2.0115-4.4629 4.4648s2.0095 4.4629 4.4629 4.4629 4.4629-2.0095 4.4629-4.4629-2.0095-4.4648-4.4629-4.4648zm0 2c1.3725 0 2.4629 1.0924 2.4629 2.4648s-1.0904 2.4629-2.4629 2.4629-2.4629-1.0904-2.4629-2.4629 1.0904-2.4648 2.4629-2.4648z" color="#000000" fill="#fff" style="-inkscape-stroke:none;paint-order:stroke fill markers"/>
+   <path d="m54.932 142.14-1.8359 0.79687 3.752 8.6582 1.8359-0.79493z" color="#000000" fill="#fff" style="-inkscape-stroke:none"/>
+  </g>
+ </g>
+</svg>