A failed Create call now switches to the page with an error

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}

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 {

app/hooks/useMonitorForm.tsx

@@ -24,34 +24,71 @@ 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': {
         const type = inputs.type ?? defaultInputs.type;
         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;