feat(FE): add drawer ui store

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -43,6 +43,7 @@ import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import NumberInput from '@/components/input/NumberInput';
 import Card from '@/components/Card';
+import { useUiStore } from '@/stores/ui/ui.store';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -79,6 +80,8 @@ const ProjectFlockForm = ({
       initialValues?.flock_name?.lastIndexOf(' ')
     ) ?? ''
   );
+  const subscribeValidate = useUiStore((s) => s.subscribeValidate);
+  const setIsValid = useUiStore((s) => s.setIsValid);
 
   const deleteModal = useModal();
   const confirmModal = useModal();
@@ -577,6 +580,29 @@ const ProjectFlockForm = ({
   //     return isValid;
   //   },
   // }));
+  useEffect(() => {
+    const unsub = subscribeValidate(() => {
+      formik.validateForm().then((errors) => {
+        if (Object.keys(errors).length > 0) {
+          // Membentuk touched object yang strongly-typed
+          const touched = Object.keys(formik.values).reduce<
+            Record<keyof typeof formik.values, boolean>
+          >(
+            (acc, key) => {
+              acc[key as keyof typeof formik.values] = true;
+              return acc;
+            },
+            {} as Record<keyof typeof formik.values, boolean>
+          );
+
+          formik.setTouched(touched, true);
+        }
+        setIsValid(Object.keys(errors).length === 0);
+      });
+    });
+
+    return unsub;
+  }, []);
 
   return (
     <>