feat(FE-208,212): enhance PurchaseOrder forms with onCancel functionality and UI improvements

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>
     </>
   );
 };