From ecb497430a9f9fcc1973e972cff126be4ab012f0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 11 Nov 2025 15:05:05 +0700
Subject: [PATCH] feat(FE-208,212): enhance PurchaseOrder forms with onCancel
 functionality and UI improvements

---
 .../pages/purchase/PurchaseTable.tsx          |  57 ++
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 931 +++++++++---------
 .../order/PurchaseOrderStaffApprovalForm.tsx  |  61 +-
 3 files changed, 544 insertions(+), 505 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 74092ebf..9e10438b 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -10,6 +10,7 @@ import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
+import Modal from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, {
   OptionType,
@@ -21,6 +22,8 @@ import TextInput from '@/components/input/TextInput';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { cn, formatDate, formatCurrency } from '@/lib/helper';
+import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
+import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
@@ -108,6 +111,8 @@ const PurchaseTable = () => {
 
   // Modal hooks
   const deleteModal = useModal();
+  const staffApprovalModal = useModal();
+  const acceptApprovalModal = useModal();
 
   // Supplier modal
   const {
@@ -282,6 +287,30 @@ const PurchaseTable = () => {
                 Tambah
               </Button>
 
+              <Button
+                onClick={() => staffApprovalModal.openModal()}
+                variant='outline'
+                color='info'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:account-check-outline' width={24} height={24} />
+                Staff Approval
+              </Button>
+
+              <Button
+                onClick={() => acceptApprovalModal.openModal()}
+                variant='outline'
+                color='success'
+                className='w-full sm:w-fit'
+              >
+                <Icon
+                  icon='mdi:package-variant-closed-check'
+                  width={24}
+                  height={24}
+                />
+                Accept Approval
+              </Button>
+
               {selectedRowIds.length > 0 && (
                 <Button
                   variant='outline'
@@ -418,6 +447,34 @@ const PurchaseTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
+
+      {/* Staff Approval Modal */}
+      <Modal
+        ref={staffApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-6xl max-h-[90vh] overflow-y-auto'
+        }}
+      >
+        <PurchaseOrderStaffApprovalForm
+          type='add'
+          onCancel={staffApprovalModal.closeModal}
+        />
+      </Modal>
+
+      {/* Accept Approval Modal */}
+      <Modal
+        ref={acceptApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-6xl max-h-[90vh] overflow-y-auto'
+        }}
+      >
+        <PurchaseOrderAcceptApprovalForm
+          type='add'
+          onCancel={acceptApprovalModal.closeModal}
+        />
+      </Modal>
     </>
   );
 };
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 31cdaab0..4e4dc609 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -23,16 +23,16 @@ import {
   Purchase,
 } from '@/types/api/purchase/purchase';
 
-import Card from '@/components/Card';
-
 interface PurchaseOrderAcceptApprovalFormProps {
   type?: 'add' | 'edit';
   initialValues?: Purchase;
+  onCancel?: () => void;
 }
 
 const PurchaseOrderAcceptApprovalForm = ({
   type = 'add',
   initialValues,
+  onCancel,
 }: PurchaseOrderAcceptApprovalFormProps) => {
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
@@ -121,6 +121,7 @@ const PurchaseOrderAcceptApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      onCancel?.();
     },
     [initialValues?.id, searchParams]
   );
@@ -136,6 +137,7 @@ const PurchaseOrderAcceptApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      onCancel?.();
       window.location.href = '/purchase';
     },
     []
@@ -330,10 +332,7 @@ const PurchaseOrderAcceptApprovalForm = ({
     formik.setFieldTouched(`items.${idx}.warehouse`, true);
     formik.setFieldValue(`items.${idx}.warehouse`, warehouse);
     formik.setFieldTouched(`items.${idx}.warehouse_id`, true);
-    formik.setFieldValue(
-      `items.${idx}.warehouse_id`,
-      warehouse?.value || 0
-    );
+    formik.setFieldValue(`items.${idx}.warehouse_id`, warehouse?.value || 0);
   };
 
   const expeditionVendorChangeHandler = (
@@ -394,478 +393,462 @@ const PurchaseOrderAcceptApprovalForm = ({
   };
 
   return (
-    <>
-      <section className='w-full'>
-        <form
-          onSubmit={formik.handleSubmit}
-          className='w-full mt-8 flex flex-col gap-6'
-        >
-          <Card
-            title='Konfirmasi Penerimaan Produk'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              title: 'mb-4',
-            }}
-          >
-            <div className='overflow-x-auto'>
-              <table className='table'>
-                <thead>
-                  <tr>
-                    <th>
-                      Item
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>Gudang</th>
-                    <th>Produk</th>
-                    <th>Jenis Produk</th>
-                    <th>Jumlah</th>
-                    <th>Satuan</th>
-                    <th>
-                      Tanggal Diterima
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Gudang Tujuan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Nomor Perjalanan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Dokumen Perjalanan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Nomor Kendaraan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Vendor Ekspedisi
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Jumlah Diterima
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Transport/Item
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Total Transport
-                      <span className='text-error'>*</span>
-                    </th>
+    <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
+      <div className='w-full'>
+        <h2 className='text-lg font-semibold mb-4'>
+          Konfirmasi Penerimaan Produk
+        </h2>
+        <div className='overflow-x-auto'>
+          <table className='table'>
+            <thead>
+              <tr>
+                <th>
+                  Item
+                  <span className='text-error'>*</span>
+                </th>
+                <th>Gudang</th>
+                <th>Produk</th>
+                <th>Jenis Produk</th>
+                <th>Jumlah</th>
+                <th>Satuan</th>
+                <th>
+                  Tanggal Diterima
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Gudang Tujuan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Nomor Perjalanan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Dokumen Perjalanan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Nomor Kendaraan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Vendor Ekspedisi
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Jumlah Diterima
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Transport/Item
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Total Transport
+                  <span className='text-error'>*</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {formik.values.items?.map((item, idx) => {
+                const selectedPurchaseItem = purchaseItems.find(
+                  (p) => p.value === item.purchase_item_id
+                );
+                return (
+                  <tr key={`purchase-item-${idx}`}>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={item.purchase_item}
+                        key={`purchase-item-${idx}`}
+                        onChange={(val) => purchaseItemChangeHandler(idx, val)}
+                        options={getPurchaseItemOptions()}
+                        isError={
+                          getPurchaseItemError(idx, 'purchase_item_id').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'purchase_item_id')
+                            .errorMessage
+                        }
+                        placeholder='Pilih Item...'
+                        className={{
+                          wrapper: 'min-w-48',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.warehouse`}
+                        type='text'
+                        value={selectedPurchaseItem?.warehouse?.name || ''}
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.product_name`}
+                        type='text'
+                        value={selectedPurchaseItem?.product?.name || ''}
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-48',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.product_category`}
+                        type='text'
+                        value={
+                          typeof selectedPurchaseItem?.product
+                            ?.product_category === 'string'
+                            ? selectedPurchaseItem.product.product_category
+                            : selectedPurchaseItem?.product?.product_category
+                                ?.name || ''
+                        }
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.quantity`}
+                        type='text'
+                        value={
+                          selectedPurchaseItem?.quantity
+                            ? selectedPurchaseItem.quantity.toLocaleString(
+                                'id-ID'
+                              )
+                            : ''
+                        }
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-24',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.uom`}
+                        type='text'
+                        value={selectedPurchaseItem?.product?.uom?.name || ''}
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-24',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.received_date`}
+                        type='date'
+                        value={item.received_date || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.received_date`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'received_date').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'received_date')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-36',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={item.warehouse}
+                        key={`warehouse-${idx}`}
+                        onChange={(val) => warehouseChangeHandler(idx, val)}
+                        options={getWarehouseOptions()}
+                        isError={
+                          getPurchaseItemError(idx, 'warehouse_id').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'warehouse_id').errorMessage
+                        }
+                        placeholder='Pilih Gudang...'
+                        className={{
+                          wrapper: 'min-w-48',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.travel_number`}
+                        type='text'
+                        value={item.travel_number || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.travel_number`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'travel_number').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'travel_number')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan nomor perjalanan'
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.travel_document_path`}
+                        type='text'
+                        value={item.travel_document_path || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.travel_document_path`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'travel_document_path')
+                            .isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'travel_document_path')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan path dokumen'
+                        className={{
+                          wrapper: 'min-w-48',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.vehicle_number`}
+                        type='text'
+                        value={item.vehicle_number || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.vehicle_number`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'vehicle_number').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'vehicle_number')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan nomor kendaraan'
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={item.expedition_vendor}
+                        key={`expedition-vendor-${idx}`}
+                        onChange={(val) =>
+                          expeditionVendorChangeHandler(idx, val)
+                        }
+                        options={getExpeditionVendorOptions()}
+                        isError={
+                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                            .isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                            .errorMessage
+                        }
+                        placeholder='Pilih Vendor...'
+                        className={{
+                          wrapper: 'min-w-40',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.received_qty`}
+                        value={item.received_qty || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'received_qty',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan jumlah diterima'
+                        allowNegative={false}
+                        decimalScale={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          getPurchaseItemError(idx, 'received_qty').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'received_qty').errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.transport_per_item`}
+                        value={item.transport_per_item || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'transport_per_item',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan transport/item'
+                        allowNegative={false}
+                        decimalScale={2}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        inputPrefix={'Rp'}
+                        isError={
+                          getPurchaseItemError(idx, 'transport_per_item')
+                            .isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'transport_per_item')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.transport_total`}
+                        value={item.transport_total || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'transport_total',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan total transport'
+                        allowNegative={false}
+                        decimalScale={2}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        inputPrefix={'Rp'}
+                        isError={
+                          getPurchaseItemError(idx, 'transport_total').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'transport_total')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
                   </tr>
-                </thead>
-                <tbody>
-                  {formik.values.items?.map((item, idx) => {
-                    const selectedPurchaseItem = purchaseItems.find(
-                      (p) => p.value === item.purchase_item_id
-                    );
-                    return (
-                      <tr key={`purchase-item-${idx}`}>
-                        <td>
-                          <SelectInput
-                            required
-                            isClearable={true}
-                            value={item.purchase_item}
-                            key={`purchase-item-${idx}`}
-                            onChange={(val) =>
-                              purchaseItemChangeHandler(idx, val)
-                            }
-                            options={getPurchaseItemOptions()}
-                            isError={
-                              getPurchaseItemError(idx, 'purchase_item_id')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'purchase_item_id')
-                                .errorMessage
-                            }
-                            placeholder='Pilih Item...'
-                            className={{
-                              wrapper: 'min-w-48',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.warehouse`}
-                            type='text'
-                            value={selectedPurchaseItem?.warehouse?.name || ''}
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.product_name`}
-                            type='text'
-                            value={selectedPurchaseItem?.product?.name || ''}
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-48',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.product_category`}
-                            type='text'
-                            value={
-                              typeof selectedPurchaseItem?.product
-                                ?.product_category === 'string'
-                                ? selectedPurchaseItem.product.product_category
-                                : selectedPurchaseItem?.product
-                                    ?.product_category?.name || ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.quantity`}
-                            type='text'
-                            value={
-                              selectedPurchaseItem?.quantity
-                                ? selectedPurchaseItem.quantity.toLocaleString(
-                                    'id-ID'
-                                  )
-                                : ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-24',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.uom`}
-                            type='text'
-                            value={
-                              selectedPurchaseItem?.product?.uom?.name || ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-24',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`items.${idx}.received_date`}
-                            type='date'
-                            value={item.received_date || ''}
-                            onChange={(e) =>
-                              formik.setFieldValue(
-                                `items.${idx}.received_date`,
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            isError={
-                              getPurchaseItemError(idx, 'received_date').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'received_date')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-36',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <SelectInput
-                            required
-                            isClearable={true}
-                            value={item.warehouse}
-                            key={`warehouse-${idx}`}
-                            onChange={(val) => warehouseChangeHandler(idx, val)}
-                            options={getWarehouseOptions()}
-                            isError={
-                              getPurchaseItemError(idx, 'warehouse_id').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'warehouse_id')
-                                .errorMessage
-                            }
-                            placeholder='Pilih Gudang...'
-                            className={{
-                              wrapper: 'min-w-48',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`items.${idx}.travel_number`}
-                            type='text'
-                            value={item.travel_number || ''}
-                            onChange={(e) =>
-                              formik.setFieldValue(
-                                `items.${idx}.travel_number`,
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            isError={
-                              getPurchaseItemError(idx, 'travel_number').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'travel_number')
-                                .errorMessage
-                            }
-                            placeholder='Masukkan nomor perjalanan'
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`items.${idx}.travel_document_path`}
-                            type='text'
-                            value={item.travel_document_path || ''}
-                            onChange={(e) =>
-                              formik.setFieldValue(
-                                `items.${idx}.travel_document_path`,
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            isError={
-                              getPurchaseItemError(idx, 'travel_document_path')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'travel_document_path')
-                                .errorMessage
-                            }
-                            placeholder='Masukkan path dokumen'
-                            className={{
-                              wrapper: 'min-w-48',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`items.${idx}.vehicle_number`}
-                            type='text'
-                            value={item.vehicle_number || ''}
-                            onChange={(e) =>
-                              formik.setFieldValue(
-                                `items.${idx}.vehicle_number`,
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            isError={
-                              getPurchaseItemError(idx, 'vehicle_number')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'vehicle_number')
-                                .errorMessage
-                            }
-                            placeholder='Masukkan nomor kendaraan'
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <SelectInput
-                            required
-                            isClearable={true}
-                            value={item.expedition_vendor}
-                            key={`expedition-vendor-${idx}`}
-                            onChange={(val) =>
-                              expeditionVendorChangeHandler(idx, val)
-                            }
-                            options={getExpeditionVendorOptions()}
-                            isError={
-                              getPurchaseItemError(idx, 'expedition_vendor_id')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'expedition_vendor_id')
-                                .errorMessage
-                            }
-                            placeholder='Pilih Vendor...'
-                            className={{
-                              wrapper: 'min-w-40',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.received_qty`}
-                            value={item.received_qty || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'received_qty',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan jumlah diterima'
-                            allowNegative={false}
-                            decimalScale={0}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            isError={
-                              getPurchaseItemError(idx, 'received_qty').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'received_qty')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.transport_per_item`}
-                            value={item.transport_per_item || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'transport_per_item',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan transport/item'
-                            allowNegative={false}
-                            decimalScale={2}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix={'Rp'}
-                            isError={
-                              getPurchaseItemError(idx, 'transport_per_item')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'transport_per_item')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.transport_total`}
-                            value={item.transport_total || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'transport_total',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan total transport'
-                            allowNegative={false}
-                            decimalScale={2}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix={'Rp'}
-                            isError={
-                              getPurchaseItemError(idx, 'transport_total')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'transport_total')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-            <div className={'col-span-2'}>
-              <TextInput
-                label='Notes'
-                name='notes'
-                value={formik.values.notes || ''}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                isError={formik.touched.notes && Boolean(formik.errors.notes)}
-                errorMessage={formik.errors.notes as string}
-                placeholder='Masukkan catatan'
-              />
-            </div>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+        <div className={'col-span-2'}>
+          <TextInput
+            label='Notes'
+            name='notes'
+            value={formik.values.notes || ''}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={formik.touched.notes && Boolean(formik.errors.notes)}
+            errorMessage={formik.errors.notes as string}
+            placeholder='Masukkan catatan'
+          />
+        </div>
 
-            {/* Action buttons */}
-            <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
-              <div className='flex flex-row justify-end gap-2 w-full'>
-                <Link href='/purchase'>
-                  <Button color='warning' className='px-4'>
-                    Cancel
-                  </Button>
-                </Link>
+        {/* Action buttons */}
+        <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
+          <div className='flex flex-row justify-end gap-2 w-full'>
+            <Button
+              type='button'
+              color='warning'
+              className='px-4'
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
 
-                <Button
-                  type='submit'
-                  color='primary'
-                  className='px-4'
-                  isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
-                >
-                  Submit
-                </Button>
-              </div>
-            </div>
+            <Button
+              type='submit'
+              color='primary'
+              className='px-4'
+              isLoading={formik.isSubmitting}
+              disabled={!formik.isValid || formik.isSubmitting}
+            >
+              Submit
+            </Button>
+          </div>
+        </div>
 
-            {purchaseOrderFormErrorMessage && (
-              <div role='alert' className='alert alert-error'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{purchaseOrderFormErrorMessage}</span>
-              </div>
-            )}
-          </Card>
-        </form>
-      </section>
-    </>
+        {purchaseOrderFormErrorMessage && (
+          <div role='alert' className='alert alert-error'>
+            <Icon
+              icon='material-symbols:error-outline'
+              width={24}
+              height={24}
+            />
+            <span>{purchaseOrderFormErrorMessage}</span>
+          </div>
+        )}
+      </div>
+    </form>
   );
 };
 
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 8f303b56..805147ba 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -23,16 +23,17 @@ import {
   Purchase,
 } from '@/types/api/purchase/purchase';
 
-import Card from '@/components/Card';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
   initialValues?: Purchase;
+  onCancel?: () => void;
 }
 
 const PurchaseOrderStaffApprovalForm = ({
   type = 'add',
   initialValues,
+  onCancel,
 }: PurchaseOrderStaffApprovalFormProps) => {
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
@@ -99,6 +100,7 @@ const PurchaseOrderStaffApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      onCancel?.();
     },
     [initialValues?.id, searchParams]
   );
@@ -117,6 +119,7 @@ const PurchaseOrderStaffApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      onCancel?.();
       window.location.href = '/purchase';
     },
     []
@@ -299,18 +302,12 @@ const PurchaseOrderStaffApprovalForm = ({
 
   return (
     <>
-      <section className='w-full'>
-        <form
-          onSubmit={formik.handleSubmit}
-          className='w-full mt-8 flex flex-col gap-6'
-        >
-          <Card
-            title='Konfirmasi Approve Pembelian'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              title: 'mb-4',
-            }}
-          >
+      <form
+        onSubmit={formik.handleSubmit}
+        className='w-full flex flex-col gap-6'
+      >
+        <div className='w-full'>
+          <h2 className='text-lg font-semibold mb-4'>Konfirmasi Approve Pembelian</h2>
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
@@ -525,11 +522,14 @@ const PurchaseOrderStaffApprovalForm = ({
             {/* Action buttons */}
             <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
               <div className='flex flex-row justify-end gap-2 w-full'>
-                <Link href='/purchase'>
-                  <Button color='warning' className='px-4'>
-                    Cancel
-                  </Button>
-                </Link>
+                <Button
+                  type='button'
+                  color='warning'
+                  className='px-4'
+                  onClick={onCancel}
+                >
+                  Cancel
+                </Button>
 
                 <Button
                   type='submit'
@@ -543,19 +543,18 @@ const PurchaseOrderStaffApprovalForm = ({
               </div>
             </div>
 
-            {purchaseOrderFormErrorMessage && (
-              <div role='alert' className='alert alert-error'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{purchaseOrderFormErrorMessage}</span>
-              </div>
-            )}
-          </Card>
-        </form>
-      </section>
+          {purchaseOrderFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseOrderFormErrorMessage}</span>
+            </div>
+          )}
+        </div>
+      </form>
     </>
   );
 };