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>
</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>
@@ -2303,7 +2286,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<SelectInput
required
value={
depletionProducts.find(
eggProducts.find(
(product) =>
product.value === egg.product_warehouse_id
) || null
@@ -2458,12 +2441,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
)}
</div>
)}
<div className='flex flex-row justify-end gap-2'>
{type !== 'detail' && (
<div
className={cn('flex flex-row justify-end gap-2', {
'w-full': type === 'add',
})}
>
<>
<Button
type='reset'
color='warning'
@@ -2493,7 +2473,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
className='px-4'
isLoading={formik.isSubmitting}
disabled={
hasExceededStock || !formik.isValid || formik.isSubmitting
hasExceededStock ||
!formik.isValid ||
formik.isSubmitting
}
onClick={async () => {
await formik.submitForm();
@@ -2513,11 +2495,32 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
}}
>
<Icon
icon='material-symbols:egg'
width={24}
height={24}
/>
Next Step: Grading
</Button>
)}
</div>
</>
)}
{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>
{recordingFormErrorMessage && (
<div role='alert' className='alert alert-error'>