From 5f0df140b0d0dda50c4491c1d673474c248d4aa2 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Sat, 8 Nov 2025 16:28:04 +0100
Subject: [PATCH] factory reset show system monitor

---
 interface/src/app/settings/Settings.tsx | 213 +++++++++++++-----------
 1 file changed, 114 insertions(+), 99 deletions(-)

diff --git a/interface/src/app/settings/Settings.tsx b/interface/src/app/settings/Settings.tsx
index 57472392d..608c37ee9 100644
--- a/interface/src/app/settings/Settings.tsx
+++ b/interface/src/app/settings/Settings.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -30,11 +30,14 @@ import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
 import { useI18nContext } from 'i18n/i18n-react';
 
+import SystemMonitor from '../status/SystemMonitor';
+
 const Settings = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SETTINGS(0));
 
   const [confirmFactoryReset, setConfirmFactoryReset] = useState(false);
+  const [restarting, setRestarting] = useState<boolean>();
 
   const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
     immediate: false
@@ -42,6 +45,7 @@ const Settings = () => {
 
   const doFormat = useCallback(async () => {
     await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
+      setRestarting(true);
       setConfirmFactoryReset(false);
     });
   }, [sendAPI]);
@@ -54,120 +58,131 @@ const Settings = () => {
     setConfirmFactoryReset(true);
   }, []);
 
-  return (
-    <SectionContent>
-      <List>
-        <ListMenuItem
-          icon={TuneIcon}
-          bgcolor="#134ba2"
-          label={LL.APPLICATION()}
-          text={LL.APPLICATION_SETTINGS_1()}
-          to="application"
-        />
+  const content = useMemo(() => {
+    return (
+      <>
+        <List>
+          <ListMenuItem
+            icon={TuneIcon}
+            bgcolor="#134ba2"
+            label={LL.APPLICATION()}
+            text={LL.APPLICATION_SETTINGS_1()}
+            to="application"
+          />
 
-        <ListMenuItem
-          icon={SettingsEthernetIcon}
-          bgcolor="#40828f"
-          label={LL.NETWORK(0)}
-          text={LL.CONFIGURE(LL.SETTINGS_OF(LL.NETWORK(1)))}
-          to="network"
-        />
+          <ListMenuItem
+            icon={SettingsEthernetIcon}
+            bgcolor="#40828f"
+            label={LL.NETWORK(0)}
+            text={LL.CONFIGURE(LL.SETTINGS_OF(LL.NETWORK(1)))}
+            to="network"
+          />
 
-        <ListMenuItem
-          icon={SettingsInputAntennaIcon}
-          bgcolor="#5f9a5f"
-          label={LL.ACCESS_POINT(0)}
-          text={LL.CONFIGURE(LL.ACCESS_POINT(1))}
-          to="ap"
-        />
+          <ListMenuItem
+            icon={SettingsInputAntennaIcon}
+            bgcolor="#5f9a5f"
+            label={LL.ACCESS_POINT(0)}
+            text={LL.CONFIGURE(LL.ACCESS_POINT(1))}
+            to="ap"
+          />
 
-        <ListMenuItem
-          icon={AccessTimeIcon}
-          bgcolor="#c5572c"
-          label="NTP"
-          text={LL.CONFIGURE(LL.LOCAL_TIME(1))}
-          to="ntp"
-        />
+          <ListMenuItem
+            icon={AccessTimeIcon}
+            bgcolor="#c5572c"
+            label="NTP"
+            text={LL.CONFIGURE(LL.LOCAL_TIME(1))}
+            to="ntp"
+          />
 
-        <ListMenuItem
-          icon={DeviceHubIcon}
-          bgcolor="#68374d"
-          label="MQTT"
-          text={LL.CONFIGURE('MQTT')}
-          to="mqtt"
-        />
+          <ListMenuItem
+            icon={DeviceHubIcon}
+            bgcolor="#68374d"
+            label="MQTT"
+            text={LL.CONFIGURE('MQTT')}
+            to="mqtt"
+          />
 
-        <ListMenuItem
-          icon={LockIcon}
-          label={LL.SECURITY(0)}
-          text={LL.SECURITY_1()}
-          to="security"
-        />
+          <ListMenuItem
+            icon={LockIcon}
+            label={LL.SECURITY(0)}
+            text={LL.SECURITY_1()}
+            to="security"
+          />
 
-        <ListMenuItem
-          icon={ViewModuleIcon}
-          bgcolor="#efc34b"
-          label={LL.MODULES()}
-          text={LL.MODULES_1()}
-          to="modules"
-        />
+          <ListMenuItem
+            icon={ViewModuleIcon}
+            bgcolor="#efc34b"
+            label={LL.MODULES()}
+            text={LL.MODULES_1()}
+            to="modules"
+          />
 
-        <ListMenuItem
-          icon={ImportExportIcon}
-          bgcolor="#5d89f7"
-          label={LL.DOWNLOAD_UPLOAD()}
-          text={LL.DOWNLOAD_UPLOAD_1()}
-          to="downloadUpload"
-        />
-      </List>
+          <ListMenuItem
+            icon={ImportExportIcon}
+            bgcolor="#5d89f7"
+            label={LL.DOWNLOAD_UPLOAD()}
+            text={LL.DOWNLOAD_UPLOAD_1()}
+            to="downloadUpload"
+          />
+        </List>
 
-      <Dialog
-        sx={dialogStyle}
-        open={confirmFactoryReset}
-        onClose={handleFactoryResetClose}
-      >
-        <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
-        <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
-        <DialogActions>
-          <Button
-            startIcon={<CancelIcon />}
-            variant="outlined"
-            onClick={handleFactoryResetClose}
-            color="secondary"
-          >
-            {LL.CANCEL()}
-          </Button>
+        <Dialog
+          sx={dialogStyle}
+          open={confirmFactoryReset}
+          onClose={handleFactoryResetClose}
+        >
+          <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
+          <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
+          <DialogActions>
+            <Button
+              startIcon={<CancelIcon />}
+              variant="outlined"
+              onClick={handleFactoryResetClose}
+              color="secondary"
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<SettingsBackupRestoreIcon />}
+              variant="outlined"
+              onClick={doFormat}
+              color="error"
+            >
+              {LL.FACTORY_RESET()}
+            </Button>
+          </DialogActions>
+        </Dialog>
+
+        <Divider />
+
+        <Box
+          mt={2}
+          display="flex"
+          justifyContent="flex-end"
+          flexWrap="nowrap"
+          whiteSpace="nowrap"
+        >
           <Button
             startIcon={<SettingsBackupRestoreIcon />}
             variant="outlined"
-            onClick={doFormat}
+            onClick={handleFactoryResetClick}
             color="error"
           >
             {LL.FACTORY_RESET()}
           </Button>
-        </DialogActions>
-      </Dialog>
+        </Box>
+      </>
+    );
+  }, [
+    LL,
+    handleFactoryResetClick,
+    handleFactoryResetClose,
+    doFormat,
+    confirmFactoryReset,
+    restarting
+  ]);
 
-      <Divider />
-
-      <Box
-        mt={2}
-        display="flex"
-        justifyContent="flex-end"
-        flexWrap="nowrap"
-        whiteSpace="nowrap"
-      >
-        <Button
-          startIcon={<SettingsBackupRestoreIcon />}
-          variant="outlined"
-          onClick={handleFactoryResetClick}
-          color="error"
-        >
-          {LL.FACTORY_RESET()}
-        </Button>
-      </Box>
-    </SectionContent>
-  );
+  return <SectionContent>{restarting ? <SystemMonitor /> : content}</SectionContent>;
 };
 
 export default Settings;