refactor(FE-170): enhance RecordingForm with approve and reject buttons for detail view

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -1247,14 +1247,43 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     <>
       <section className='w-full'>
         <header className='flex flex-col gap-4'>
-          <Button
-            href='/production/recording'
-            variant='link'
-            className='w-fit p-0 text-primary'
-          >
-            <Icon icon='uil:arrow-left' width={24} height={24} />
-            Kembali
-          </Button>
+          <div className='flex justify-between items-center w-full'>
+            <Button
+              href='/production/recording'
+              variant='link'
+              className='w-fit p-0 text-primary'
+            >
+              <Icon icon='uil:arrow-left' width={24} height={24} />
+              Kembali
+            </Button>
+
+            {type === 'detail' && (
+              <div className='flex flex-row gap-2'>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={() => approveModal.openModal()}
+                  isLoading={isApproveLoading}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='material-symbols:check' width={24} height={24} />
+                  Approve
+                </Button>
+
+                <Button
+                  variant='outline'
+                  color='error'
+                  onClick={() => rejectModal.openModal()}
+                  isLoading={isRejectLoading}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='material-symbols:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </div>
+            )}
+          </div>
+
           <h1 className='text-2xl font-bold text-center'>
             {type === 'add' && 'Tambah Recording'}
             {type === 'edit' && 'Edit Recording'}
@@ -2346,40 +2375,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     Edit
                   </Button>
                 )}
-                {type === 'detail' && (
-                  <>
-                    <Button
-                      type='button'
-                      color='success'
-                      onClick={() => approveModal.openModal()}
-                      className='px-4'
-                      isLoading={isApproveLoading}
-                    >
-                      <Icon
-                        icon='material-symbols:check-circle-outline'
-                        width={24}
-                        height={24}
-                        className='justify-start text-sm'
-                      />
-                      Approve
-                    </Button>
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={() => rejectModal.openModal()}
-                      className='px-4'
-                      isLoading={isRejectLoading}
-                    >
-                      <Icon
-                        icon='material-symbols:cancel-outline'
-                        width={24}
-                        height={24}
-                        className='justify-start text-sm'
-                      />
-                      Reject
-                    </Button>
-                  </>
-                )}
               </div>
             )}
             {type !== 'detail' && (