fix(FE): create hooks for formik error list and integrate alert error list for finance and master data modules

src/components/pages/dashboard/DashboardProduction.tsx

@@ -14,10 +14,8 @@ import { DashboardApi } from '@/services/api/dashboard';
 import { useFormik } from 'formik';
 import { ProjectFlockApi } from '@/services/api/production';
 import { KandangApi, LocationApi } from '@/services/api/master-data';
-import Alert from '@/components/Alert';
 
 import {
-  DashboardFilterSchema,
   DashboardFilterType,
   getDashboardFilterSchema,
 } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
@@ -31,7 +29,7 @@ import {
 import DashboardStats from '@/components/pages/dashboard/chart/DashboardStats';
 import { isResponseSuccess } from '@/lib/api-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
-import { getUniqueFormikErrors } from '@/lib/formik-helper';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -51,7 +49,6 @@ const DashboardProduction = () => {
   );
   const [endpointUrl, setEndpointUrl] = useState('/dashboards');
   const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
-  const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
   // ===== FETCH DATA =====
   const {
@@ -149,22 +146,8 @@ const DashboardProduction = () => {
     formik.resetForm();
   };
 
-  const handleValidateForm = async () => {
-    const errors = await formik.validateForm();
-
-    if (Object.keys(errors).length > 0) {
-      // Parse and display errors
-      const errorMessages = getUniqueFormikErrors(errors);
-      setFormErrorList(errorMessages);
-      return; // Stop submission
-    }
-  };
-
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleValidateForm();
-    formik.handleSubmit();
-  };
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   if (isLoadingDashboardProductionData) {
     return (
@@ -482,13 +465,7 @@ const DashboardProduction = () => {
               </div>
             )}
 
-            {/* Error List Alert */}
-            {formErrorList.length > 0 && (
-              <AlertErrorList
-                formErrorList={formErrorList}
-                onClose={() => setFormErrorList([])}
-              />
-            )}
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
 
             {/* Action Buttons */}
             <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>