refactor(FE-170): refactor RecordingForm navigation and action buttons for improved user experience

This commit is contained in:
rstubryan
2025-11-06 15:19:01 +07:00
parent 90dd26064d
commit 069ab98da1
@@ -1350,23 +1350,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
))} ))}
</ul> </ul>
</div> </div>
{/* Action buttons for multi-form navigation */}
{type === 'detail' && (
<div className='mt-4 flex gap-2'>
<Button
type='button'
color='primary'
onClick={() => {
router.push(
`/production/recording/grading/add?recording_id=${initialValues?.id}`
);
}}
>
Lanjut ke Grading
</Button>
</div>
)}
</div> </div>
)} )}
</div> </div>
@@ -2303,7 +2286,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<SelectInput <SelectInput
required required
value={ value={
depletionProducts.find( eggProducts.find(
(product) => (product) =>
product.value === egg.product_warehouse_id product.value === egg.product_warehouse_id
) || null ) || null
@@ -2458,66 +2441,86 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
)} )}
</div> </div>
)} )}
{type !== 'detail' && ( <div className='flex flex-row justify-end gap-2'>
<div {type !== 'detail' && (
className={cn('flex flex-row justify-end gap-2', { <>
'w-full': type === 'add',
})}
>
<Button
type='reset'
color='warning'
className='px-4'
onClick={(e) => {
formik.handleReset(e);
formik.validateForm();
}}
>
Reset
</Button>
<Button
type='submit'
color='primary'
className='px-4'
isLoading={formik.isSubmitting}
disabled={
hasExceededStock || !formik.isValid || formik.isSubmitting
}
>
Submit
</Button>
{isLayingCategory && (
<Button <Button
type='button' type='reset'
color='info' color='warning'
className='px-4'
onClick={(e) => {
formik.handleReset(e);
formik.validateForm();
}}
>
Reset
</Button>
<Button
type='submit'
color='primary'
className='px-4' className='px-4'
isLoading={formik.isSubmitting} isLoading={formik.isSubmitting}
disabled={ disabled={
hasExceededStock || !formik.isValid || formik.isSubmitting hasExceededStock || !formik.isValid || formik.isSubmitting
} }
onClick={async () => {
await formik.submitForm();
if (
formik.isValid &&
!formik.isSubmitting &&
!hasExceededStock
) {
toast.success(
'Recording berhasil disimpan! Mengalihkan ke form Grading...'
);
setTimeout(() => {
router.push(
'/production/recording/grading/add?recording_id=1'
);
}, 1000);
}
}}
> >
Next Step: Grading Submit
</Button> </Button>
)} {isLayingCategory && (
</div> <Button
)} type='button'
color='info'
className='px-4'
isLoading={formik.isSubmitting}
disabled={
hasExceededStock ||
!formik.isValid ||
formik.isSubmitting
}
onClick={async () => {
await formik.submitForm();
if (
formik.isValid &&
!formik.isSubmitting &&
!hasExceededStock
) {
toast.success(
'Recording berhasil disimpan! Mengalihkan ke form Grading...'
);
setTimeout(() => {
router.push(
'/production/recording/grading/add?recording_id=1'
);
}, 1000);
}
}}
>
<Icon
icon='material-symbols:egg'
width={24}
height={24}
/>
Next Step: Grading
</Button>
)}
</>
)}
{type === 'detail' && isLayingCategory && (
<Button
type='button'
color='primary'
onClick={() => {
router.push(
`/production/recording/grading/add?recording_id=${initialValues?.id}`
);
}}
>
<Icon icon='material-symbols:egg' width={24} height={24} />
Lanjut ke Grading
</Button>
)}
</div>
</div> </div>
{recordingFormErrorMessage && ( {recordingFormErrorMessage && (
<div role='alert' className='alert alert-error'> <div role='alert' className='alert alert-error'>