refactor(FE): Move form error alerts to bottom of forms

This commit is contained in:
rstubryan
2026-01-28 14:14:44 +07:00
parent 70fcbf795b
commit 9f93200bd5
8 changed files with 154 additions and 137 deletions
@@ -1734,22 +1734,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
onSubmit={handleFormSubmit}
className='w-full mt-8 flex flex-col gap-6'
>
{recordingFormErrorMessage && (
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{recordingFormErrorMessage}</span>
</div>
)}
{/* Error List Alert */}
{formErrorList.length > 0 && (
<AlertErrorList formErrorList={formErrorList} onClose={close} />
)}
{/* Basic Info Card */}
{(type === 'add' || type === 'edit') && (
<Card
@@ -3010,6 +2994,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Card>
)}
<div className='w-full'>
{recordingFormErrorMessage && (
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{recordingFormErrorMessage}</span>
</div>
)}
{/* Error List Alert */}
{formErrorList.length > 0 && (
<AlertErrorList formErrorList={formErrorList} onClose={close} />
)}
</div>
{/* Action buttons */}
<div className='flex flex-col sm:flex-row sm:justify-between gap-2'>
{/* Left side - Detail & Edit actions */}
@@ -511,25 +511,6 @@ const UniformityForm = ({
<h2 className='text-2xl font-semibold mb-6'>Informasi Umum</h2>
<form onSubmit={handleFormSubmit} className='flex flex-col gap-6'>
{uniformityFormErrorMessage && (
<div className='alert alert-error' role='alert'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{uniformityFormErrorMessage}</span>
</div>
)}
{/* Error List Alert */}
{formErrorList.length > 0 && (
<AlertErrorList
formErrorList={formErrorList}
onClose={() => setFormErrorList([])}
/>
)}
<DateInput
required
label='Tanggal'
@@ -753,6 +734,27 @@ const UniformityForm = ({
)}
</div>
<div className='w-full'>
{uniformityFormErrorMessage && (
<div className='alert alert-error' role='alert'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{uniformityFormErrorMessage}</span>
</div>
)}
{/* Error List Alert */}
{formErrorList.length > 0 && (
<AlertErrorList
formErrorList={formErrorList}
onClose={() => setFormErrorList([])}
/>
)}
</div>
{!isNextStep && (
<RequirePermission permissions='lti.production.uniformity.create'>
<Button