fix: add form validation for configuration form

src/figma-make/components/pages/master-data/configuration/MasterConfigurationContent.tsx

@@ -69,6 +69,7 @@ export function MasterConfigurationContent() {
     }
   );
 
+  const [isFormInvalid, setIsFormInvalid] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [configurationToDelete, setConfigurationToDelete] = useState<
@@ -173,6 +174,26 @@ export function MasterConfigurationContent() {
       return;
     }
 
+    if (
+      Number(configurationForm.percentage_threshold_enough) >= 100 ||
+      Number(configurationForm.percentage_threshold_bad) >= 100
+    ) {
+      setIsFormInvalid(true);
+      toast.error('Persentase threshold tidak boleh lebih dari 100');
+      return;
+    }
+
+    if (
+      Number(configurationForm.percentage_threshold_enough) <=
+      Number(configurationForm.percentage_threshold_bad) + 1
+    ) {
+      setIsFormInvalid(true);
+      toast.error(
+        'Persentase threshold "kurang" harus lebih kecil dari persentase threshold "cukup"'
+      );
+      return;
+    }
+
     setLoading(true);
 
     try {
@@ -443,14 +464,18 @@ export function MasterConfigurationContent() {
                   type='number'
                   id='percentageThresholdBad'
                   value={configurationForm.percentage_threshold_bad}
-                  onChange={(e) =>
+                  onChange={(e) => {
+                    setIsFormInvalid(false);
+
                     setConfigurationForm({
                       ...configurationForm,
                       percentage_threshold_bad: e.target.value,
-                    })
+                    });
-                  }
+                  }}
                   placeholder='Kurang'
-                  className='w-20'
+                  className={cn('w-20', {
+                    'border-red-500': isFormInvalid,
+                  })}
                   disabled={loading}
                   max={100}
                 />
@@ -476,14 +501,17 @@ export function MasterConfigurationContent() {
                   type='number'
                   id='percentageThresholdEnough'
                   value={configurationForm.percentage_threshold_enough}
-                  onChange={(e) =>
+                  onChange={(e) => {
+                    setIsFormInvalid(false);
                     setConfigurationForm({
                       ...configurationForm,
                       percentage_threshold_enough: e.target.value,
-                    })
+                    });
-                  }
+                  }}
                   placeholder='Cukup'
-                  className='w-20'
+                  className={cn('w-20', {
+                    'border-red-500': isFormInvalid,
+                  })}
                   disabled={loading}
                   min={Number(configurationForm.percentage_threshold_bad) + 1}
                   max={100}