Ft dashboard - #1958

.gitignore

@@ -71,3 +71,4 @@ words-found-verbose.txt
 
 # sonarlint
 compile_commands.json
+package.json

CHANGELOG_LATEST.md

@@ -36,13 +36,14 @@ For more details go to [www.emsesp.org](https://www.emsesp.org/).
 - RT800 remote emulation [#1867](https://github.com/emsesp/EMS-ESP32/issues/1867)
 - RC310 cooling parameters [#1857](https://github.com/emsesp/EMS-ESP32/issues/1857)
 - command `api/device/entities` [#1897](https://github.com/emsesp/EMS-ESP32/issues/1897)
-- switchprogmode [#1903]<https://github.com/emsesp/EMS-ESP32/discussions/1903>
+- switchprogmode [#1903](https://github.com/emsesp/EMS-ESP32/discussions/1903)
 - autodetect and download firmware upgrades via the WebUI
 - command 'show log' that lists out the current weblog buffer, showing last messages.
 - default web log buffer to 25 lines for ESP32s with no PSRAM
 - try and determine correct board profile if none is set during boot
 - auto Scroll in WebLog UI - reduced delay so incoming logs are faster
-- uploading custom support info for Guest users [#2054]<https://github.com/emsesp/EMS-ESP32/issues/2054>
+- uploading custom support info, shown to Guest users in Help page [#2054](https://github.com/emsesp/EMS-ESP32/issues/2054)
+- feature: Dashboard showing all data (favorites, sensors, custom) [#1958](https://github.com/emsesp/EMS-ESP32/issues/1958)
 
 ## Fixed
 
@@ -69,7 +70,7 @@ For more details go to [www.emsesp.org](https://www.emsesp.org/).
 - Change key-names in JSON to be compliant and consistent [#1860](https://github.com/emsesp/EMS-ESP32/issues/1860)
 - Updates to webUI [#1920](https://github.com/emsesp/EMS-ESP32/issues/1920)
 - Correct firmware naming #1933 [#1933](https://github.com/emsesp/EMS-ESP32/issues/1933)
-- Don't start Serial console if not connected to a Serial port. Will initiate manually after a CTRL-C  
+- Don't start Serial console if not connected to a Serial port. Will initiate manually after a CTRL-C/CTRL-S  
 - WebLog UI matches color schema of the terminal console correctly
 - Updated Web libraries, ArduinoJson
 - Help page doesn't show detailed tech info if the user is not 'admin' role [#2054](https://github.com/emsesp/EMS-ESP32/issues/2054)

interface/eslint.config.js

@@ -16,7 +16,15 @@ export default tseslint.config(
     }
   },
   {
-    ignores: ['dist/*', 'build/*', '*.js', '**/*.cjs', '**/unpack.ts', 'i18n*.*']
+    ignores: [
+      'dist/*',
+      '*.mjs',
+      'build/*',
+      '*.js',
+      '**/*.cjs',
+      '**/unpack.ts',
+      'i18n*.*'
+    ]
   },
   {
     rules: {

interface/package.json

@@ -21,35 +21,35 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@alova/adapter-xhr": "2.0.7",
+    "@alova/adapter-xhr": "2.0.8",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.2",
-    "@mui/material": "^6.1.2",
+    "@mui/icons-material": "^6.1.3",
+    "@mui/material": "^6.1.3",
     "@table-library/react-table-library": "4.1.7",
-    "alova": "3.0.17",
+    "alova": "3.1.0",
     "async-validator": "^4.2.5",
     "jwt-decode": "^4.0.0",
     "mime-types": "^2.1.35",
     "preact": "^10.24.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.26.2",
-    "react-toastify": "^10.0.5",
+    "react-router-dom": "^6.27.0",
+    "react-toastify": "^10.0.6",
     "typesafe-i18n": "^5.26.2",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.7",
+    "@babel/core": "^7.25.8",
     "@eslint/js": "^9.12.0",
     "@preact/compat": "^18.3.1",
     "@preact/preset-vite": "^2.9.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/formidable": "^3",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.7.5",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/react-router-dom": "^5.3.3",
     "concurrently": "^9.0.1",
     "eslint": "^9.12.0",
@@ -58,7 +58,7 @@
     "prettier": "^3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",
     "terser": "^5.34.1",
-    "typescript-eslint": "8.8.0",
+    "typescript-eslint": "8.8.1",
     "vite": "^5.4.8",
     "vite-plugin-imagemin": "^0.6.1",
     "vite-tsconfig-paths": "^5.0.1"

interface/src/App.tsx

@@ -25,7 +25,7 @@ const App = () => {
       <CustomTheme>
         <AppRouting />
         <ToastContainer
-          position="bottom-right"
+          position="bottom-left"
           autoClose={3000}
           hideProgressBar={false}
           newestOnTop={false}

interface/src/AuthenticatedRouting.tsx

@@ -3,6 +3,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 
 import CustomEntities from 'app/main/CustomEntities';
 import Customizations from 'app/main/Customizations';
+import Dashboard from 'app/main/Dashboard';
 import Devices from 'app/main/Devices';
 import Help from 'app/main/Help';
 import Modules from 'app/main/Modules';
@@ -32,6 +33,7 @@ const AuthenticatedRouting = () => {
   return (
     <Layout>
       <Routes>
+        <Route path="/dashboard/*" element={<Dashboard />} />
         <Route path="/devices/*" element={<Devices />} />
         <Route path="/sensors/*" element={<Sensors />} />
         <Route path="/status/*" element={<Status />} />

interface/src/api/app.ts

@@ -5,6 +5,7 @@ import type {
   Action,
   Activity,
   CoreData,
+  DashboardItem,
   DeviceData,
   DeviceEntity,
   Entities,
@@ -19,7 +20,13 @@ import type {
   WriteTemperatureSensor
 } from '../app/main/types';
 
-// DashboardDevices
+// Dashboard
+export const readDashboard = () =>
+  alovaInstance.Get<DashboardItem[]>('/rest/dashboardData', {
+    responseType: 'arraybuffer' // uses msgpack
+  });
+
+// Devices
 export const readCoreData = () => alovaInstance.Get<CoreData>(`/rest/coreData`);
 export const readDeviceData = (id: number) =>
   alovaInstance.Get<DeviceData>('/rest/deviceData', {

interface/src/app/main/CustomEntities.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useBlocker } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
@@ -27,6 +27,7 @@ import {
   useLayoutTitle
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
+import { useInterval } from 'utils';
 
 import { readCustomEntities, writeCustomEntities } from '../../api/app';
 import SettingsCustomEntitiesDialog from './CustomEntitiesDialog';
@@ -52,17 +53,11 @@ const CustomEntities = () => {
     initialData: []
   });
 
-  useEffect(() => {
-    const timer = setInterval(async () => {
-      if (dialogOpen || numChanges > 0) {
-        return;
-      }
-      await fetchEntities();
-    }, 2000);
-    return () => {
-      clearInterval(timer);
-    };
-  });
+  useInterval(() => {
+    if (!dialogOpen && !numChanges) {
+      void fetchEntities();
+    }
+  }, 3000);
 
   const { send: writeEntities } = useRequest(
     (data: Entities) => writeCustomEntities(data),
@@ -295,7 +290,7 @@ const CustomEntities = () => {
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
       <Box mb={2} color="warning.main">
-        <Typography variant="body2">{LL.ENTITIES_HELP_1()}</Typography>
+        <Typography variant="body1">{LL.ENTITIES_HELP_1()}</Typography>
       </Box>
 
       {renderEntity()}

interface/src/app/main/Customizations.tsx

@@ -427,7 +427,7 @@ const Customizations = () => {
   const renderDeviceList = () => (
     <>
       <Box mb={1} color="warning.main">
-        <Typography variant="body2">{LL.CUSTOMIZATIONS_HELP_1()}.</Typography>
+        <Typography variant="body1">{LL.CUSTOMIZATIONS_HELP_1()}.</Typography>
       </Box>
       <Box display="flex" flexWrap="wrap" alignItems="center" gap={2}>
         {rename ? (