refactor(FE-Storyless): replace FormHeader and FormActions with custom header and action buttons for improved UI

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -9,8 +9,6 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import { FormHeader } from '@/components/helper/form/FormHeader';
-import { FormActions } from '@/components/helper/form/FormActions';
 import {
   CreateMovementPayload,
   Movement,
@@ -730,11 +728,21 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   return (
     <>
       <section className='w-full'>
-        <FormHeader
+        <header className='flex flex-col gap-4'>
-          type={type}
+          <Button
-          title='Movement'
+            href='/inventory/movement'
-          backUrl='/inventory/movement'
+            variant='link'
-        />
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Movement'}
+            {type === 'edit' && 'Edit Movement'}
+            {type === 'detail' && 'Detail Movement'}
+          </h1>
+        </header>
         <form
           onSubmit={formik.handleSubmit}
           onReset={formik.handleReset}
@@ -1582,11 +1590,65 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           </div>
 
           {/* Action buttons */}
-          <FormActions<MovementFormValues>
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
-            type={type}
+            {type !== 'add' && (
-            formik={formik}
+              <div className='flex flex-row justify-start gap-2'>
-            disableSubmit={hasInvalidQty || hasExceededStock}
+                <Button
-          />
+                  type='button'
+                  color='error'
+                  onClick={() => console.log('Delete clicked')}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/inventory/movement/detail/edit/?movementId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {type !== 'detail' && (
+              <div className='flex flex-row justify-end gap-2 w-full'>
+                <Button
+                  type='reset'
+                  color='warning'
+                  className='px-4'
+                >
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  className='px-4'
+                  isLoading={formik.isSubmitting}
+                  disabled={hasInvalidQty || hasExceededStock || !formik.isValid || formik.isSubmitting}
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
 
           {movementFormErrorMessage && (
             <div role='alert' className='alert alert-error'>