From 069ab98da155968b6be5a0f75320dbc0a31f8f8c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 6 Nov 2025 15:19:01 +0700
Subject: [PATCH] refactor(FE-170): refactor RecordingForm navigation and
 action buttons for improved user experience

---
 .../recording/form/RecordingForm.tsx          | 143 +++++++++---------
 1 file changed, 73 insertions(+), 70 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 922f318e..4101d3d6 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -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,66 +2441,86 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 )}
               </div>
             )}
-            {type !== 'detail' && (
-              <div
-                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 && (
+            <div className='flex flex-row justify-end gap-2'>
+              {type !== 'detail' && (
+                <>
                   <Button
-                    type='button'
-                    color='info'
+                    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
                     }
-                    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>
-                )}
-              </div>
-            )}
+                  {isLayingCategory && (
+                    <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>
           {recordingFormErrorMessage && (
             <div role='alert' className='alert alert-error'>