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

This commit is contained in:
randy-ar
2026-01-12 17:19:16 +07:00
parent 0f9849c0ac
commit aa114c164b
27 changed files with 280 additions and 242 deletions
@@ -17,6 +17,8 @@ import TextInput from '@/components/input/TextInput';
import { cn } from '@/lib/helper';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import RequirePermission from '@/components/helper/RequirePermission';
import AlertErrorList from '@/components/helper/form/FormErrors';
import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
interface FlockCustomProps {
formType?: 'add' | 'edit' | 'detail';
@@ -86,6 +88,9 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
formikSetValues(formikInitialValue);
}, [formikSetValues, formikInitialValue]);
// ===== Formik Error List =====
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
// Render
return (
<>
@@ -107,7 +112,7 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
</h1>
</header>
<form
onSubmit={formik.handleSubmit}
onSubmit={handleFormSubmit}
onReset={formik.handleReset}
className='w-full mt-8 flex flex-col gap-6'
>
@@ -168,6 +173,8 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
</div>
)}
<AlertErrorList formErrorList={formErrorList} onClose={close} />
{formType !== 'detail' && (
<div
className={cn('flex flex-row justify-end gap-2', {
@@ -182,7 +189,7 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
type='submit'
color='primary'
isLoading={formik.isSubmitting}
disabled={!formik.isValid || formik.isSubmitting}
disabled={formik.isSubmitting}
className='px-4'
>
Submit