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

src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx

@@ -9,6 +9,7 @@ import {
   ProductionStandardRepeaterFormSchemaValues,
   ProductionStandardFormValues,
   createProductionStandardRepeaterFormSchema,
+  ProductionStandardFormSchema,
 } from '@/components/pages/master-data/production-standard/form/ProductionStandardForm.schema';
 import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
@@ -31,6 +32,8 @@ import { useModal } from '@/components/Modal';
 import RequirePermission from '@/components/helper/RequirePermission';
 import Tooltip from '@/components/Tooltip';
 import Alert from '@/components/Alert';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import AlertErrorList from '@/components/helper/form/FormErrors';
 
 type TableRowsType = {
   customRow: boolean;
@@ -207,6 +210,7 @@ const ProductionStandardForm = ({
     initialValues: formikInitialValues as ProductionStandardFormValues,
     // Only enable reinitialize for edit/detail mode, not add mode
     enableReinitialize: formType !== 'add',
+    validationSchema: ProductionStandardFormSchema,
     onSubmit: (values) => {
       switch (formType) {
         case 'add':
@@ -723,7 +727,8 @@ const ProductionStandardForm = ({
     router.push('/master-data/production-standard');
   };
 
-  // ===== Function =====
+  // ===== Formik Error List =====
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   return (
     <>
@@ -1210,9 +1215,26 @@ const ProductionStandardForm = ({
             return null;
           }}
         />
+
+        <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
+        {productionStandardFormErrorMessage && (
+          <Alert color='error' className='w-full'>
+            <div className='flex items-center gap-2 stretch'>
+              <Icon icon='mdi:alert' />
+              <span>{productionStandardFormErrorMessage}</span>
+            </div>
+            <Icon
+              icon='mdi:close'
+              onClick={() => setProductionStandardFormErrorMessage('')}
+              className='ms-auto'
+            />
+          </Alert>
+        )}
+
         <form
           className='flex justify-between mt-6 gap-2 flex-wrap'
-          onSubmit={formik.handleSubmit}
+          onSubmit={handleFormSubmit}
         >
           {formType === 'detail' && (
             <div className='gap-2 flex items-center'>
@@ -1293,19 +1315,6 @@ const ProductionStandardForm = ({
             </div>
           )}
         </form>
-        {productionStandardFormErrorMessage && (
-          <Alert color='error' className='w-full'>
-            <div className='flex items-center gap-2 stretch'>
-              <Icon icon='mdi:alert' />
-              <span>{productionStandardFormErrorMessage}</span>
-            </div>
-            <Icon
-              icon='mdi:close'
-              onClick={() => setProductionStandardFormErrorMessage('')}
-              className='ms-auto'
-            />
-          </Alert>
-        )}
       </div>
 
       <ConfirmationModal