From 59a8d13dbd6e359d60d484bc09f70dc2592fbb0f Mon Sep 17 00:00:00 2001
From: lucky <joe10hunting@hotmail.com>
Date: Sun, 23 Nov 2025 22:14:06 -0600
Subject: [PATCH] A failed Create call now switches to the page with an error

---
 app/components/modal/monitor/configure.tsx | 24 +++++++----
 app/components/modal/monitor/styles.scss   | 12 ++++++
 app/hooks/useMonitorForm.tsx               | 49 +++++++++++++++++++---
 3 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/app/components/modal/monitor/configure.tsx b/app/components/modal/monitor/configure.tsx
index 9fea2f9a..39b9aac3 100644
--- a/app/components/modal/monitor/configure.tsx
+++ b/app/components/modal/monitor/configure.tsx
@@ -43,11 +43,12 @@ const MonitorConfigureModal = ({
   isEdit = false,
 }: ModalProps) => {
   const [pageId, setPageId] = useState('basic');
-  const { errors, inputs, handleActionButtons, handleInput } = useMonitorForm(
+  const { errors, inputs, handleActionButtons, handleInput, errorPages, setErrorPages } = useMonitorForm(
     monitor,
     isEdit,
     closeModal,
-    handleMonitorSubmit
+    handleMonitorSubmit,
+    setPageId
   );
 
   return (
@@ -65,12 +66,19 @@ const MonitorConfigureModal = ({
           <div className="monitor-configure-left-pages">
             {pages.map((page) => (
               <div
-                className={
-                  page.id === pageId
-                    ? 'monitor-configure-page-button active'
-                    : 'monitor-configure-page-button'
-                }
-                onClick={() => setPageId(page.id)}
+                className={`monitor-configure-page-button 
+                  ${page.id === pageId ? 'active' : ''}
+                  ${errorPages.has(page.id) ? 'error-circle' : ''}`}
+
+                onClick={() => {
+                  setErrorPages(oldSet => {
+                    const trimmedErrorPages = new Set([...oldSet])
+                    trimmedErrorPages.delete(pageId)
+                    return trimmedErrorPages
+                  })
+                  setPageId(page.id)
+                  
+                }}
                 key={page.id}
               >
                 {page.icon}
diff --git a/app/components/modal/monitor/styles.scss b/app/components/modal/monitor/styles.scss
index 41d9b3f4..fd7bed60 100644
--- a/app/components/modal/monitor/styles.scss
+++ b/app/components/modal/monitor/styles.scss
@@ -13,6 +13,7 @@
 }
 
 .monitor-configure-page-button {
+  position: relative;
   padding: 12px;
   background-color: var(--accent-800);
   border-radius: 8px;
@@ -31,6 +32,17 @@
   &:hover {
     background-color: var(--accent-700);
   }
+  
+  &.error-circle::after {
+    content: "";
+    position: absolute;
+    top: 40%;
+    right: 10px; 
+    width: 10px; 
+    height: 10px;
+    background-color: red;
+    border-radius: 50%;
+  }
 }
 
 .monitor-configure-left-container {
diff --git a/app/hooks/useMonitorForm.tsx b/app/hooks/useMonitorForm.tsx
index e26b542e..6eccde49 100644
--- a/app/hooks/useMonitorForm.tsx
+++ b/app/hooks/useMonitorForm.tsx
@@ -24,18 +24,50 @@ const useMonitorForm = (
   values: Partial<MonitorProps> = defaultInputs,
   isEdit: boolean = false,
   closeModal: () => void,
-  setMonitor: (monitor: Partial<MonitorProps>) => void
+  setMonitor: (monitor: Partial<MonitorProps>) => void,
+  setPageId: (id: string) => void,
 ) => {
   const [inputs, setInput] = useState<Partial<MonitorProps>>({
     ...defaultInputs,
     ...values,
   });
   const [errors, setErrors] = useState({});
+  const [errorPages, setErrorPages] = useState<Set<string>>(new Set())
 
   const handleInput = (name: string, value: any) => {
     setInput((prev) => ({ ...prev, [name]: value }));
   };
 
+  const getPagesWithErrors = (errorsObj: Record<string,string>) => {
+    
+    const associatedPage: Record<string, string> = {
+      'name': "basic",
+      'type': "basic",
+      'url': "basic",
+      'port': "basic",
+      'icon': "basic",
+      'method': "basic",
+      'json_query': "basic",
+      'interval': "interval",
+      'retry': "interval",
+      'retryInterval': "interval",
+      'requestTimeout': "interval",
+      'notificationType': "notification",
+      'headers': "advanced",
+      'body': "advanced",
+      'valid_status_codes': "advanced",
+    }
+    const pagesWithError = new Set<string>();
+    
+    Object.keys(errorsObj).forEach(error => {
+      const page = associatedPage[error]
+      if(error && page) pagesWithError.add(page)
+    })
+
+    return pagesWithError
+  }
+
+
   const handleActionButtons = (action: string) => () => {
     switch (action) {
       case 'Create': {
@@ -43,15 +75,20 @@ const useMonitorForm = (
         const validator = monitorValidators[type];
         if (!validator) return console.log("Validator doesn't exist");
 
-        const errorsObj = validator(inputs);
+        const errorsObj = validator(inputs) as Record<string, string> | false;
+
+        if (errorsObj !== false) {
+          const pagesWithErrors = getPagesWithErrors(errorsObj)
+          setErrorPages(pagesWithErrors);
+          setPageId(Array.from(pagesWithErrors)[0])
 
-        if (errorsObj) {
-          setErrors(errorsObj);
+          setErrors(errorsObj);     
           break;
         }
 
+        setErrorPages(new Set<string>())
         setErrors({});
-
+        
         handleMonitor(inputs, isEdit, closeModal, setMonitor);
         break;
       }
@@ -66,7 +103,7 @@ const useMonitorForm = (
     }
   };
 
-  return { inputs, errors, handleActionButtons, handleInput };
+  return { inputs, errors, handleActionButtons, handleInput, errorPages, setErrorPages };
 };
 
 export default useMonitorForm;