refactor(FE-208): enhance PurchaseRequestForm layout and actions, replace header with custom component and improve button handling

src/components/pages/purchase/form/PurchaseRequestForm.tsx

@@ -10,8 +10,6 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
-import { FormHeader } from '@/components/helper/form/FormHeader';
-import { FormActions } from '@/components/helper/form/FormActions';
 
 import {
   PurchaseRequestFormSchema,
@@ -260,9 +258,24 @@ const PurchaseRequestForm = ({
   return (
     <>
       <section className='w-full'>
-        <FormHeader type={type} title='Purchase Request' backUrl='/purchase' />
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/purchase'
+            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 Purchase Request'}
+            {type === 'edit' && 'Edit Purchase Request'}
+            {type === 'detail' && 'Detail Purchase Request'}
+          </h1>
+        </header>
         <form
           onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
           {/* Basic Info Card */}
@@ -574,16 +587,46 @@ const PurchaseRequestForm = ({
           </Card>
 
           {/* Action buttons */}
-          <FormActions<PurchaseRequestFormValues>
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
-            type={type}
+            {type !== 'detail' && (
-            formik={formik}
+              <div className='flex flex-row justify-end gap-2 w-full'>
-            editUrl={
+                <Button type='reset' color='warning' className='px-4'>
-              initialValues
+                  Reset
-                ? `/purchase/detail/edit/?purchaseId=${initialValues.id}`
+                </Button>
-                : undefined
+
-            }
+                <Button
-            onDelete={deletePurchaseRequestClickHandler}
+                  type='submit'
-          />
+                  color='primary'
+                  className='px-4'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+            {type === 'detail' && (
+              <div className='flex flex-row justify-end gap-2 w-full'>
+                <Button
+                  href={`/purchase/detail/edit/?purchaseId=${initialValues?.id}`}
+                  color='primary'
+                  className='px-4'
+                >
+                  Edit
+                </Button>
+
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deletePurchaseRequestClickHandler}
+                  className='px-4'
+                >
+                  Delete
+                </Button>
+              </div>
+            )}
+          </div>
+
           {purchaseRequestFormErrorMessage && (
             <div role='alert' className='alert alert-error'>
               <Icon