refactor(FE): Validate Uniformity form and show error list

src/components/pages/production/uniformity/form/UniformityForm.tsx

@@ -43,7 +43,9 @@ import UniformityResultForm from '@/components/pages/production/uniformity/form/
 import { generateUniformityTemplate } from '@/components/pages/production/uniformity/export/UniformityTemplate';
 import useSWR from 'swr';
 import { cn, formatNumber } from '@/lib/helper';
+import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import Tooltip from '@/components/Tooltip';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 interface UniformityFormProps {
   formType?: 'add' | 'edit';
@@ -77,6 +79,7 @@ const UniformityForm = ({
 
   const [uniformityFormErrorMessage, setUniformityFormErrorMessage] =
     useState('');
+  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -282,6 +285,22 @@ const UniformityForm = ({
     },
   });
 
+  const handleValidateForm = async () => {
+    const errors = await formik.validateForm();
+
+    if (Object.keys(errors).length > 0) {
+      const errorMessages = getUniqueFormikErrors(errors);
+      setFormErrorList(errorMessages);
+      return;
+    }
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleValidateForm();
+    formik.handleSubmit(e);
+  };
+
   // ===== FORM HANDLERS =====
   const handleLocationChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
@@ -454,7 +473,7 @@ const UniformityForm = ({
         <section className='w-full px-6 mb-6'>
           <h2 className='text-2xl font-semibold mb-6'>Informasi Umum</h2>
 
-          <form onSubmit={formik.handleSubmit} className='flex flex-col gap-6'>
+          <form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
             {uniformityFormErrorMessage && (
               <div className='alert alert-error' role='alert'>
                 <Icon
@@ -466,6 +485,14 @@ const UniformityForm = ({
               </div>
             )}
 
+            {/* Error List Alert */}
+            {formErrorList.length > 0 && (
+              <AlertErrorList
+                formErrorList={formErrorList}
+                onClose={() => setFormErrorList([])}
+              />
+            )}
+
             <DateInput
               required
               label='Tanggal'