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();
+        }
+      }
+    ]
+  });